更新记录

0.3.2(2022-11-24)

  • 修复响应拦截器无法获取config配置的问题

0.3.1(2022-11-24)

修复参数为对象时,报错的问题(奇怪,我明明记得这个问题早就按评论区的修复过了)

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

uniapp-axios-adapter

用于uni-appaxios库以及使用到的UniAdapter适配器

利用axiosadapter适配器来兼容了小程序的请求 api。添加本适配器或者使用本包导出的axios后,axios底层将使用uni.request发起请求

项目源码很简单,感兴趣的可以前往github或者gitee查看

安装

安装 uniapp-axios-adapter

推荐使用pnpm进行包管理。

  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版本

  pnpm/npm i axios@0.27.2
  # 或者 yarn add axios@0.27.2

使用

我们按需导出了UniAdapter适配器,并且默认导出了使用了该适配器的axios,你可以自行使用适配器,也可以直接使用我们导出的 axios

自行使用适配器

指定axios的适配器adapter为本适配器即可,其余用法与axios保持一致

import axios from "axios";
import { UniAdapter } from "uniapp-axios-adapter";

// 每次请求都创建一个新的实例
const request = axios.create({
  baseURL: "https://example.com",
  timeout: 10000,
  adapter: UniAdapter, // 指定适配器
});

示例 1 设置请求拦截器与响应拦截器

// 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;
// 具体业务代码文件中
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

添加拦截器的方式

// 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;

直接使用

// 业务代码中
import axios from "uniapp-axios-adapter";
axios.get({
  url: "https://example.com/api/getUserById",
  params: {
    id: 1,
  },
});

更新日志

点击查看

TODO

  • 压缩打包,减小体积
  • 适配uni.downloadFileuni.uploadFile

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问