微信小程序与axios组成网络层封装过程详解
作者：程序不了猿
背景
小程序在网络层提供的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);
},
});
});
};
到此这篇关于微信小程序与axios组成网络层封装过程详解的文章就介绍到这了,更多相关小程序与axios网络层封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！