在uni-app中使用官方的axios发起请求

简介

由于axios底层使用xhr发起请求，并不适用于各平台的小程序。好在axios提供了适配器选项，让我们可以兼容小程序平台，使其底层使用uni.request发起请求。

为了更好的代码复用，我将自己写好的适配器发布到了npm上，方便大家使用。

项目源码很简单,感兴趣的可以前往github或者gitee查看，如果觉得好用的话，请记得帮忙点个start

源码地址

github
gitee

npm地址

npm

安装

安装 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.downloadFile和uni.uploadFile