微信小程序与axios组成网络层封装过程详解
作者:程序不了猿 发布时间:2024-04-19 10:01:38
背景
小程序在网络层提供的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);
},
});
});
};
来源:https://blog.csdn.net/qq_37730829/article/details/128932153
猜你喜欢
- 你家中的CD、VCD一定很多吧?是不是常遇到为找一张CD把一抽屉的碟子翻得乱七八糟的情况,你一定没少受埋怨——你不想整理它们一下?如:影片是
- 一.设置客户端网络实用工具点击“开始”-“程序”,在“Microsoft SQL Server”菜单中选择“客户端网络实用工具”。 在“别名
- 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序。触发器是一个特殊的存储过程。
- 一 描述561. 数组拆分 I - 力扣(LeetCode) (leetcode-cn.com)给定长度为 2n 的整数
- 本文进通过实例,讲述通过 prototype 自定义方法的过程,旨在抛砖引玉,如果不对的地方,欢迎指正!prototype 是在 IE 4
- 第一题: give you two var a and b, print the value of a+b, just do it!根据提议
- MySQL关键字Distinct用法介绍DDLPrepare SQL:create table test(id bigint not nul
- asp使用session来防止表单多次被提交的方法。formtest.asp' 表单文件<%Randomize&nb
- 一直以来,jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后,就迫不及待去了解了一下1.4版本对比以往1.3.
- 这是通过博主写的英雄联盟下载器下载的部分的英雄皮肤,可以看一下效果。每个英雄的皮肤的会自动根据英雄名称创建相应的文件夹存放。实现思路比较简单
- 前言数据清洗是一项复杂且繁琐(kubi)的工作,同时也是整个数据分析过程中最为重要的环节。有人说一个分析项目80%的时间都是在清洗数据,这听
- 1.数组上的迭代NumPy 包含一个迭代器对象numpy.nditer。它是一个有效的多维迭代器对象,可以用于在数组上进行迭代。数组的每个元
- 前言本文紧接着前一篇的入门教程,会介绍一些关于pandas的进阶知识。建议读者在阅读本文之前先看完pandas入门教程。同样的,本文的测试数
- 大家一定使用过 phpmyadmin 里面的数据库导入,导出功能,非常方便。但是在实际应用中,我发现如下几个问题:1、数据库超过一定尺寸,比
- 这篇文章主要介绍了如何使用python传入不确定个数参数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 概述:可以将.py源代码转换成无需源代码的可执行文件(直接就可以运行的程序)因为有的时候Windows,Mac,Linux系统上并没有安装P
- 今天我们使用 Pyecharts 制作一个地球可视化项目,一起来看看吧Let’s go!数据处理这里我们使用全球新冠感染
- 编写一个程序,能在当前目录以及当前目录的所有子目录下查找文件名包含指定字符串的文件,并打印出绝对路径。import osclass Sear
- 前言工作中,Git的使用越来越频繁。。除了最常用的clone,add,commit,push,pull等命令;还有回退命令reset。这一篇
- 本文实例讲述了Python批量重命名同一文件夹下文件的方法。分享给大家供大家参考。具体分析如下:朋友发了一个文件夹过来,里面的图片都以 .t