封装axios

安装axios

npm install axios --save

根目录下创建api文件夹，在api文件夹下创建network.js和index.js文件：

在network.js对axios进行全局配置并封装：

// 导入axios
import axios from 'axios';

// 进行一些全局配置
// 公共路由(网络请求地址)
const baseUrl = {
    dev: "xxxxxx",
    pro: "XXXXXX"
}
axios.defaults.baseURL = process.env.NODE_ENV === "development"
    ? baseUrl.dev
    : baseUrl.pro;
// 请求响应超时时间
axios.defaults.timeout = 5000;

// http request 拦截器 请求拦截器
axios.interceptors.request.use(
    config => {
        // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
        // config.data = JSON.stringify(config.data)
        config.data = JSON.stringify(config.data)
        config.headers = {
            // 'Content-Type': 'application/x-www-form-urlencoded'
            'Content-Type': 'application/json;charset=UTF-8'
        }
        // if(token){
        //   config.params = {'token':token}
        // }
        return config
    }, error => {
        return Promise.reject(error)
    }
)
// 响应拦截器
axios.interceptors.response.use(response => {
    return Promise.resolve(response.data)
}, error => {
    // 错误信息
    console.log(error.response.data.message || "undefined");
    return Promise.reject(error)
});

// 封装自己的get/post方法
export default {
    get: function (path = '', data = {}) {
        return new Promise(function (resolve, reject) {
            axios.get(path, {
                params: data
            })
                .then(function (response) {
                    // 按需求来，response.data || response
                    resolve(response);
                })
                .catch(function (error) {
                    reject(error);
                });
        });
    },
    post: function (path = '', data = {}) {
        return new Promise(function (resolve, reject) {
            axios.post(path, data)
                .then(function (response) {
                    resolve(response);
                })
                .catch(function (error) {
                    reject(error);
                });
        });
    }
};

index.js：专门用于管理请求各种接口地址，配置相应代码:

// 导入封装好的网络请求类工具
// 两种方式(如果封装自己的get/post方法，只能用第一种)
import Network from './network';
//import axios from 'axios';

// 封装各种接口请求
export const name = (params) => Network.get('api/statistic', params);

// export const name = (params) => {
//     return axios.request({
//         url: 'api/statistics',
//         method: 'get',
//         params: params
//     })
// }

使用：

import { name } from "@/api/index";

name(params).then((res)=>{
  console.log(res)
})