【FAQ】uni-app：uni-app + axios 报Adapter Exception

问题原因

uni-app拦截了所有非uni.request发送的请求

解决方案

上文说到uni-app拦截了所有非uni.request发送的请求，所以下面需要将axios转发使用uni.request发送网络请求，步骤如下

1. 在Axios，AxiosRequestConfig配置类中有一个adapter的配置属性，他的作用就是让用户何以自定义请求策略，AxiosRequestConfig属性如下：

export interface AxiosRequestConfig<D = any> {
  ...
  timeout?: Milliseconds;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapterConfig | AxiosAdapterConfig[];
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  responseEncoding?: responseEncoding | string;
 ...
}

上文可以看到存在一个adapter的属性，接下来，开始配置它，代码附上

import axios from "axios";
import type { AxiosResponse } from 'axios'

const _axios = axios.create({
    timeout: 60000
});

_axios.interceptors.request.use((config) => {
    config.url = config.baseURL + config.url;
    return config;
})

_axios.interceptors.response.use((response) => {
    return {
        data: response.data,
        status: response.statusCode,
        message: response.statusText
    }
})

_axios.defaults.adapter = (config) => {
    return new Promise<AxiosResponse<string | AnyObject | ArrayBuffer>>((resolve, reject) => {
    	//这里使用uni-app的请求方法发送请求
        uni.request({
            method: (config.method || 'GET').toUpperCase(),
            url: config.url,
            header: config.headers,
            data: config.data || config.params,
            dataType: config.responseType,
            responseType: config.responseType,
            sslVerify: config.withCredentials,
            success: (res) => {
                resolve({
                    data: res.data.data || null,
                    status: res.statusCode,
                    statusText: res.data.message || "",
                    headers: res.header,
                    config: config
                })
            },
            fail: (error) => {
                reject(error)
            }
        })
    })
}

export function useApi() {
    return _axios;
}