165 lines
3.6 KiB
Markdown
165 lines
3.6 KiB
Markdown
|
## uniapp-axios-adapter
|
||
|
|
||
|
用于`uni-app`的`axios`库以及使用到的`UniAdapter`适配器
|
||
|
|
||
|
利用`axios`的`adapter`适配器来兼容了小程序的请求 api。添加本适配器或者使用本包导出的`axios`后,`axios`底层将使用`uni.request`发起请求
|
||
|
|
||
|
项目源码很简单,感兴趣的可以前往`github`或者`gitee`查看
|
||
|
|
||
|
## 安装
|
||
|
|
||
|
### 安装 uniapp-axios-adapter
|
||
|
|
||
|
推荐使用`pnpm`进行包管理。
|
||
|
|
||
|
```shell
|
||
|
pnpm/npm i uniapp-axios-adapter
|
||
|
# 或者 yarn add uniapp-axios-adapter
|
||
|
```
|
||
|
|
||
|
### 安装 axios
|
||
|
|
||
|
我们在包里添加了最新版本的`axios`作为依赖,如果你不想使用最新版本的`axios`,可以自行安装指定版本的`axios`配合我们的`UniAdapter`来使用,`tree-shaking`不会将本包依赖的`axios`打包进生产环境中
|
||
|
|
||
|
`axios v1.0+`尚不稳定,推荐安装`0.27.2`版本
|
||
|
|
||
|
```shell
|
||
|
pnpm/npm i axios@0.27.2
|
||
|
# 或者 yarn add axios@0.27.2
|
||
|
```
|
||
|
|
||
|
### 使用
|
||
|
|
||
|
我们按需导出了`UniAdapter`适配器,并且默认导出了使用了该适配器的`axios`,你可以自行使用适配器,也可以直接使用我们导出的 axios
|
||
|
|
||
|
### 自行使用适配器
|
||
|
|
||
|
指定`axios`的适配器`adapter`为本适配器即可,其余用法与`axios`保持一致
|
||
|
|
||
|
```js
|
||
|
import axios from "axios";
|
||
|
import { UniAdapter } from "uniapp-axios-adapter";
|
||
|
|
||
|
// 每次请求都创建一个新的实例
|
||
|
const request = axios.create({
|
||
|
baseURL: "https://example.com",
|
||
|
timeout: 10000,
|
||
|
adapter: UniAdapter, // 指定适配器
|
||
|
});
|
||
|
```
|
||
|
|
||
|
#### 示例 1 设置请求拦截器与响应拦截器
|
||
|
|
||
|
```js
|
||
|
// src/utils/http.js 中
|
||
|
import axios from "axios";
|
||
|
import { UniAdapter } from "uniapp-axios-adapter";
|
||
|
|
||
|
const request = axios.create({
|
||
|
baseURL: "https://example.com",
|
||
|
timeout: 10000,
|
||
|
adapter: UniAdapter,
|
||
|
});
|
||
|
|
||
|
request.interceptors.request.use((config) => {
|
||
|
//带上token
|
||
|
config.headers["Authorization"] = "token";
|
||
|
return config;
|
||
|
});
|
||
|
|
||
|
request.interceptors.response.use((response) => {
|
||
|
// 统一处理响应,返回Promise以便链式调用
|
||
|
if (response.status === 200) {
|
||
|
const { data } = response;
|
||
|
if (data && data.code === 200) {
|
||
|
return Promise.resolve(data);
|
||
|
} else {
|
||
|
return Promise.reject(data);
|
||
|
}
|
||
|
} else {
|
||
|
return Promise.reject(response);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
export default request;
|
||
|
```
|
||
|
|
||
|
```js
|
||
|
// 具体业务代码文件中
|
||
|
import http from 'src/utils/http.js' // 上一步封装axios的路径中
|
||
|
|
||
|
http({
|
||
|
url: 'example/api/test'
|
||
|
method: 'get',
|
||
|
params: {
|
||
|
id: 123,
|
||
|
}
|
||
|
})
|
||
|
|
||
|
http({
|
||
|
url: 'example/api/test'
|
||
|
method: 'post',
|
||
|
data: {
|
||
|
id: 123,
|
||
|
}
|
||
|
})
|
||
|
|
||
|
```
|
||
|
|
||
|
### 使用开箱即用的 axios
|
||
|
|
||
|
#### 添加拦截器的方式
|
||
|
|
||
|
```js
|
||
|
// http.js中
|
||
|
import axios from "uniapp-axios-adapter";
|
||
|
const request = axios.create({
|
||
|
baseURL: "https://example.com",
|
||
|
timeout: 10000,
|
||
|
});
|
||
|
|
||
|
request.interceptors.request.use((config) => {
|
||
|
//带上token
|
||
|
config.headers["Authorization"] = "token";
|
||
|
return config;
|
||
|
});
|
||
|
|
||
|
request.interceptors.response.use((response) => {
|
||
|
// 统一处理响应,返回Promise以便链式调用
|
||
|
if (response.status === 200) {
|
||
|
const { data } = response;
|
||
|
if (data && data.code === 200) {
|
||
|
return Promise.resolve(data);
|
||
|
} else {
|
||
|
return Promise.reject(data);
|
||
|
}
|
||
|
} else {
|
||
|
return Promise.reject(response);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
export default request;
|
||
|
```
|
||
|
|
||
|
#### 直接使用
|
||
|
|
||
|
```js
|
||
|
// 业务代码中
|
||
|
import axios from "uniapp-axios-adapter";
|
||
|
axios.get({
|
||
|
url: "https://example.com/api/getUserById",
|
||
|
params: {
|
||
|
id: 1,
|
||
|
},
|
||
|
});
|
||
|
```
|
||
|
|
||
|
## 更新日志
|
||
|
|
||
|
[点击查看](https://gitee.com/black-key/uniapp-axios-adapter/blob/main/CHANGELOG.md)
|
||
|
|
||
|
## TODO
|
||
|
|
||
|
- 压缩打包,减小体积
|
||
|
- 适配`uni.downloadFile`和`uni.uploadFile`
|