180 lines
3.6 KiB
Markdown
180 lines
3.6 KiB
Markdown
用于 uni-app 的 `axios` adapter
|
||
|
||
利用 `axios` params.adapter 增加了 uni-app 的 `uni.request` 和 `uni.uploadFile` 的适配器
|
||
|
||
基于原来的 `xhr.js` adapter 调整而来，保留了中止请求的 `cancelToken` 用法
|
||
|
||
**欢迎 issue 和 pr**
|
||
|
||
## TODO
|
||
|
||
- [ ] examples
|
||
- [ ] 测试用例是模拟的，仅校验了配置数据格式，考虑用 uniapp 接口做测试。 [https://uniapp.dcloud.io/collocation/auto/quick-start](https://uniapp.dcloud.io/collocation/auto/quick-start)
|
||
|
||
## 安装
|
||
|
||
Using npm:
|
||
|
||
`$ npm install axios-adapter-uniapp`
|
||
|
||
Using yarn:
|
||
|
||
`$ yarn add axios-adapter-uniapp`
|
||
|
||
直接引用：
|
||
|
||
去[仓库](https://github.com/lcysgsg/axios-adapter-uniapp)复制
|
||
|
||
## 用法
|
||
|
||
> 就是 axios ， 具体看 axios 文档， 这里大概的列一下
|
||
|
||
[axios](https://www.npmjs.com/package/axios)
|
||
|
||
[uniapp request](https://uniapp.dcloud.io/api/request/request)
|
||
|
||
[uniapp network-file](https://uniapp.dcloud.io/api/request/network-file)
|
||
|
||
### 适配了什么
|
||
|
||
- `GET`
|
||
- 兼容了字段 `data`， `data`（优先） 和 `params` 效果相同。
|
||
- `POST`
|
||
- 上传文件，要触发 `uni.uploadFile` 需要满足 2 个条件：
|
||
- `POST`
|
||
- `config.filePath && config.name` 或 `Array.isArray(config.files) && config.files.length > 0`
|
||
- 取消请求，不能支持 uniapp 原先的方法——因为 `Promise`，支持使用 axios CancelToken 的用法
|
||
|
||
### 例子
|
||
|
||
例子都是 `config` 风格， 也是我推荐的（），链式也支持，更多例子可以看根目录下的 `__tests__/index.spec.js`
|
||
|
||
```js
|
||
// '@/common/js/axios/index.js'
|
||
|
||
import axios from 'axios'
|
||
import axiosAdapterUniapp from 'axios-adapter-uniapp'
|
||
|
||
const instance = axios.create({
|
||
baseURL: 'URL.com',
|
||
adapter: axiosAdapterUniapp,
|
||
})
|
||
|
||
// request拦截器
|
||
instance.interceptors.request.use()
|
||
|
||
// respone拦截器
|
||
instance.interceptors.request.use()
|
||
|
||
export default instance
|
||
```
|
||
|
||
`GET`
|
||
|
||
```js
|
||
import axios from '@/common/js/axios/index.js'
|
||
|
||
axios({
|
||
method: 'get',
|
||
url: '/user',
|
||
data: {
|
||
id: 1,
|
||
},
|
||
})
|
||
|
||
axios({
|
||
method: 'get',
|
||
url: '/user',
|
||
params: {
|
||
id: 1,
|
||
},
|
||
})
|
||
|
||
// 两者结果相同 =>
|
||
// URL.com/user?id=1
|
||
```
|
||
|
||
`POST`
|
||
|
||
```js
|
||
import axios from '@/common/js/axios/index.js'
|
||
|
||
axios({
|
||
method: 'post',
|
||
url: '/user',
|
||
data: {
|
||
firstName: 'Fred',
|
||
lastName: 'Flintstone',
|
||
},
|
||
})
|
||
```
|
||
|
||
`UPLOAD`，要触发 `uni.uploadFile` 需要满足 2 个条件：
|
||
|
||
- `POST`
|
||
- `config.filePath && config.name` 或 `Array.isArray(config.files) && config.files.length > 0`
|
||
|
||
```js
|
||
import axios from '@/common/js/axios/index.js'
|
||
|
||
axios({
|
||
method: 'post',
|
||
url: '/avatar',
|
||
filePath: uri,
|
||
name: 'file',
|
||
formData: {
|
||
firstName: 'Fred',
|
||
lastName: 'Flintstone',
|
||
},
|
||
})
|
||
|
||
axios({
|
||
method: 'post',
|
||
url: '/avatar',
|
||
files: [
|
||
// 多文件上传有注意事项的，看uni文档
|
||
{ name: 'file', uri: uri },
|
||
],
|
||
formData: {
|
||
firstName: 'Fred',
|
||
lastName: 'Flintstone',
|
||
},
|
||
})
|
||
```
|
||
|
||
`CancelToken` 取消请求， [https://www.npmjs.com/package/axios#cancellation](https://www.npmjs.com/package/axios#cancellation)
|
||
|
||
```js
|
||
import axios from '@/common/js/axios/index.js'
|
||
|
||
const CancelToken = axios.CancelToken;
|
||
const source = CancelToken.source();
|
||
|
||
axios({
|
||
...,
|
||
cancelToken: source.token
|
||
}).catch(function (thrown) {
|
||
if (axios.isCancel(thrown)) {
|
||
console.log('Request canceled', thrown.message);
|
||
} else {
|
||
// handle error
|
||
}
|
||
});
|
||
|
||
// 或者
|
||
|
||
const CancelToken = axios.CancelToken;
|
||
let cancel;
|
||
|
||
axios({
|
||
...,
|
||
cancelToken: new CancelToken(function executor(c) {
|
||
// An executor function receives a cancel function as a parameter
|
||
cancel = c;
|
||
})
|
||
});
|
||
|
||
// cancel the request
|
||
cancel();
|
||
```
|