Taro request 请求封装
在根目录下创建service文件夹
再创建 baseUrl文件 写入请求地址
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const getBaseUrl = (url) => { let BASE_URL = '' ; if (process.env.NODE_ENV === 'development' ) { //开发环境 - 根据请求不同返回不同的BASE_URL BASE_URL = 'https://*********' } else { // 生产环境 BASE_URL = 'https://*********' } return BASE_URL } export default getBaseUrl; |
创建config.js文件写入常用状态码
1 2 3 4 5 6 7 8 9 10 11 12 13 | export const HTTP_STATUS = { SUCCESS: 200, CREATED: 201, ACCEPTED: 202, CLIENT_ERROR: 400, AUTHENTICATE: 401, FORBIDDEN: 403, NOT_FOUND: 404, SERVER_ERROR: 500, BAD_GATEWAY: 502, SERVICE_UNAVAILABLE: 503, GATEWAY_TIMEOUT: 504 } |
创建http文件写入逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import Taro from '@tarojs/taro' import getBaseUrl from './baseUrl' import interceptors from './interceptors' interceptors.forEach(interceptorItem => Taro.addInterceptor(interceptorItem)) class httpRequest { baseOptions(params, method = "GET" ) { let { url, data,param } = params; const BASE_URL = getBaseUrl(url); // let contentType = "application/x-www-form-urlencoded"; let contentType = "application/json;charset=UTF-8" ; contentType = params.contentType || contentType; const option = { url: BASE_URL + url, //地址 data: data, //传参 method: method, //请求方式 timeout:50000, // 超时时间 header: { //请求头 'content-type' : contentType, 'Authorization' :Taro.getStorageSync( 'Authorization' ) } }; return Taro.request(option); } get(url, data = "" ,param) { let option = { url, data,param }; return this .baseOptions(option); } post(url, data,param, contentType) { let params = { url, data,param, contentType }; return this .baseOptions(params, "POST" ); } put(url, data = "" ) { let option = { url, data }; return this .baseOptions(option, "PUT" ); } delete (url, data = "" ) { let option = { url, data }; return this .baseOptions(option, "DELETE" ); } } export default new httpRequest() |
再创建interceptors文件 写入异常显示逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | import Taro from "@tarojs/taro" import { pageToLogin } from "./utils" import { HTTP_STATUS } from './config' const customInterceptor = (chain) => { const requestParams = chain.requestParams Taro.showLoading({ title: '加载中' , }) return chain.proceed(requestParams).then(res => { Taro.hideLoading() // 只要请求成功,不管返回什么状态码,都走这个回调 if (res.statusCode === HTTP_STATUS.NOT_FOUND) { return Promise.reject({ desc: '请求资源不存在' }) } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) { return Promise.reject({ desc: "服务端出现了问题" }) } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) { Taro.setStorageSync( "Authorization" , "" ) pageToLogin() // TODO 根据自身业务修改 return Promise.reject({ desc: "没有权限访问" }); } else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) { Taro.setStorageSync( "Authorization" , "" ) pageToLogin() return Promise.reject({ desc: "需要鉴权" }) } else if (res.statusCode === HTTP_STATUS.SERVER_ERROR) { return Promise.reject({ desc: "服务器错误" }); } else if (res.statusCode === HTTP_STATUS.SUCCESS) { if (res.data.code === 0) { return res.data } else if (res.data.code == '-100' ) { //非法登录 pageToLogin() } else { return Promise.reject(res.data) } } }). catch (error=> { Taro.hideLoading() console.error(error) return Promise.reject(error) }) } // Taro 提供了两个内置拦截器 // logInterceptor - 用于打印请求的相关信息 // timeoutInterceptor - 在请求超时时抛出错误。 // const interceptors = [customInterceptor, Taro.interceptors.logInterceptor] const interceptors = [customInterceptor] export default interceptors |
创建utils文件 写入处理异常状态方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import Taro from "@tarojs/taro" ; /** * @description 获取当前页url */ export const getCurrentPageUrl = () => { let pages = Taro.getCurrentPages() let currentPage = pages[pages.length - 1] let url = currentPage.route return url } export const pageToLogin = () => { let path = getCurrentPageUrl() Taro.clearStorage() if (!path.includes( 'login' )) { Taro.reLaunch({ url: "/pages/login/login" }); } } |
最后创建 servers文件进行api注册
1 2 3 4 5 | import HTTPREQUEST from "./http" export const getLogin = (data) => { return HTTPREQUEST.post( '/api/login/login' , data) } |
最后在页面引入就可以了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步