vue使用request.js封装axios

在vue项目中创建util 工具包，并在util中创建request.js文件

import axios from 'axios';

const request = axios.create({
    baseURL: 'http://localhost:9090',
    timeout: 5000
})

//request 拦截器
//可以自请求发送前对请求做一些处理
//比如统一加token，对请求参数做处理
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'; // 设置请求头
    // do something before request is sent
    return config;
}, error => {
    // do something with request error
    return Promise.reject(error);
});

//response 拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        const res = response.data;
        //如果返回的是文件
        if (response.config.responseType === 'blob') {
            return res;
        }
        //兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            return JSON.parse(res);
        }
        // do something with response data
        return res;
    },
    error => {
        // do something with response error
        console.log('err' + error); // for debug
        return Promise.reject(error);
    }
);

export default request;

添加request.js后，新建api文件夹，新建api.js

import request from "@/util/request"

export const  xxx = {

        addTestById(opt){

                return request({

                        url: '/xxx',

                        method: 'post',

                        data: opt

                })

        }

}

export default xxx;

注意：get、delete 方式时data变为params而不是opt

之后就可以在vue文件的methods方法中调用api并执行里面的方法，具体格式为

xxxapi.addTestById("加入前端传输的值").then(res => {

        //调用接口后的一些操作 例如执行查询操作等

})