微信小程序与axios组成网络层封装过程详解
程序不了猿 人气:0背景
小程序在网络层提供的API是能够完成一个程序与服务端交互的完整链路,但需要大量的定制化代码,才能实现请求拦截和响应拦截,不太符合大多数开发者的使用习惯,对于前端开发者来说,网络层还得是axios。
本片主要讲一下小程序网络层使用axios的简要总结,这是一个最精简的一个demo,大家可以在这个基础上去扩充实践。
依赖
这边需要注意的是使用uni-vue3版本时axios的版本需要0.26.0以下,建议锁版本
npm i axios@0.26.0 axios-miniprogram-adapter
&&
yarn add axios@0.26.0 axios-miniprogram-adapter
axios-miniprogram-adapter
这个依赖主要是适配小程序网络请求的适配器,这个适配器的原理大家感兴趣可以去了解一下,简单来说**,axios在发起网络请求时会先判断用户是否定义的适配器,如果定义了那就使用适配器发起网络请求,如果没有定义它会前判断环境,node环境使用http(与服务端一致),浏览器环境使用xhr(高版本可能用fetch,具体是否用大家可以看一下源码)。**所以可以得出一个优先级 adapter >http(node)或xhr(浏览器)。
最简demo
import axios, { AxiosRequestConfig } from 'axios'; import mpAdapter from 'axios-miniprogram-adapter' import { globalConfig } from '../config'; // base_url const baseURL = globalConfig.BASE_URL; // @ts-ignore // 适配器 axios.defaults.adapter = mpAdapter // axios初始化实例 const axiosIns = axios.create({ baseURL, timeout: 10000, }); // request 请求拦截器,处理逻辑 axiosIns.interceptors.request.use( async (axiosConfig) => { const config = axiosConfig as any; config.headers = { contentType: 'application/json;charset=UTF-8', }; return config; }, (error) => { return Promise.reject(error); }, ); // response拦截器 axiosIns.interceptors.response.use( (response) => { const responData = response.data; const { rtnFlag } = responData; // 判断业务是否成功 if (rtnFlag !== '9999') { // 失败 return Promise.reject(responData); } // 成功 return Promise.resolve(responData); }, (err) => { return Promise.reject(err); }, ); export default axiosIns
自定义适配器
如果不用axios-miniprogram-adapter这个依赖,大家也可以如下自定义适配器,这个在uni、微信、支付中可以通用,但注意uni-vue3版本中axios版本需要0.26.0锁死(这个是个人尝试的成功版本,有时间大家可以继续探索)
import axios, { AxiosRequestConfig } from 'axios'; import settle from 'axios/lib/core/settle'; import buildURL from 'axios/lib/helpers/buildURL'; // 自定义适配器适配uniapp语法 axios.defaults.adapter = function (config: any) { return new Promise((resolve, reject) => { uni.request({ ...config, method: config.method.toUpperCase(), header:config.headers, url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer), complete: (response: any) => { response = { ...response, config, }; settle(resolve, reject, response); }, }); }); };
加载全部内容