前端Vue框架请求后台之request封装axios

1、第一步，安装axios ，在 vue项目 里面 输入 npm i axios -S

2、第二步，在vue项目中创建util 工具包，在里面创建request.js文件

3、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;

4、在main.js里面去使用

Vue.prototype.request=request;