uniapp引入axios报错记录

1,417 阅读1分钟

uniapp使用axios报以下错,这是因为小程序不能直接使用axios,只能使用原生uni.request,需要配置自定义适配器adapter,但我配置之后仍然报相同错错误,将axios版本从1.2降为0.27之后不报错,1.2版本尚不知道如何解决报错问题

image.png

uniapp使用axios的步骤如下:

终端输入npm install axios 进行安装

image.png

在根目录新建文件夹utils,文件夹下建request.js

image.png

request.js代码如下:

import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
    baseURL:"http://localhost:8080/",
    timeout : 6000
})

// 请求拦截
service.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject( error );
    }
);

// 响应拦截
service.interceptors.response.use( res => {
    if ( res.status == 200 ){
        return res;
    } else {
        return Promise.reject( res.data.msg );
    }
});

// 自定义适配器 , 适配uniapp语法
axios.defaults.adapter = function( config ) {
    return new Promise( ( resolve , reject ) => {
        let settle = require('axios/lib/core/settle');
        let buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method : config.method.toUpperCase(),
            url : config.baseURL + buildURL( config.url , config.params , config.paramsSerializer ),
            header : config.headers,
            data : config.data,
            dataType : config.dataType,
            responseType : config.responseType,
            sslVerify : config.sslVerify,
            complete : function complete( response ) {
                response = {
                    data : response.data,
                    status : response.statusCode,
                    errMsg : response.errMsg,
                    header : response.header,
                    config : config
                };
            settle( resolve , reject , response );
            },
        });
    })
}

export default service

最后在main.js中引入该文件并在Vue实例上挂载axios

// 引入封装后的axios
import axios from './utils/request.js'
Vue.prototype.$axios = axios