axios-adapter-uniapp v0.1.4

用于 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

安装

Using npm:

$ npm install axios-adapter-uniapp

Using yarn:

$ yarn add axios-adapter-uniapp

直接引用：

去仓库复制

用法

就是 axios ， 具体看 axios 文档， 这里大概的列一下

axios

uniapp request

uniapp 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

// '@/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

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

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

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

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();