基于 uni-app 搭建多端框架的踩坑攻略之Axios

习惯了使用axios访问接口，那熟悉的拦截器，用的是多么多么爽，今天再使用uniapp开发小程序的时候，想着也可以继续使用axios来访问接口，殊不知的是踩坑开始了

坑一：Adapter http is not available in the build

最近我在使用Uni-app开发微信小程序的过程中，遇到了一个奇怪的问题：当我运行到微信开发者工具axios发请求的代码时，控制台输出Adapter http is not available in the build。

这是由于axios底层使用xhr发起请求，并不适用于各平台的小程序。好在axios提供了适配器选项，让我们可以兼容小程序平台，使其底层使用uni.request发起请求。我在各种平台上发现了一个大佬直接写好的npm适配器uniapp-axios-adapter，所以我们直接拿来安装配置使用即可

  pnpm/npm i uniapp-axios-adapter
  # 或者 yarn add uniapp-axios-adapter

使用方法：

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

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

也支持开箱即用

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

感谢大佬！！传送门 https://juejin.cn/post/7157578701926826015

坑二：在使用上面的适配器访问接口的时候，微信开发者工具会提示wx.request: header must be an object

此处我们找到uniapp-axios-adapter这个包所在目录下的lib/index.cjs.js和lib/index.esm.js

//大概29行的位置
header: headers
改为
header: JSON.parse(JSON.stringify(headers))

坑三：triggerOnEvent called on a deprecated instance

我们开发h5网页端的时候，我们可能直接设置axios的responseType为json，以便来回请求的都是json，但是此处恰巧是一个坑，可能会影响你的接口回调逻辑

因为小程序responseType：合法值只有 text、arraybuffer，并且支付宝小程序不支持此属性

所以我们要改成小程序支持的responseType

{
    responseType:'text'
}

以上这篇基于 uni-app 搭建多端框架的踩坑攻略之Axios就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。

基于 uni-app 搭建多端框架的踩坑攻略之Axios

相关推荐

深入理解position sticky 粘性定位

vue3如何解决reactive()响应式对象初始化重新赋值

满屏import优化方案之使用模块重导（Re-export）

微信小程序封装公共弹窗dailog组件-UNIAPP篇

记录几种常用的弹出层动画样式效果

π • 热门