axios二次封装

使用ES6来二次封装axios

http.js

export default class XHR {
    constructor(config) {
        this.config = {
            baseURL: process.env.VUE_BASE_URL,
            headers: {},
            timeout: 5000,
        };

        // 创建axios实例
        this.config = Object.assign(this.config, config);
        this.$axios = axios.create(this.config);

        //请求拦截
        this.$axios.interceptors.request.use(
            (config) => {
                //携带token
                // if(store.state.token) {
                //     config.headers['token'] = store.user.token
                // }
                return config;
            },
            (err) => {
                return Promise.reject(err);
            }
        );

        // 响应拦截
        this.$axios.interceptors.response.use(
            (config) => {
                // 对响应做处理
                return config;
            },
            (err) => {
                return Promise.reject(err);
            }
        );
    }

    request(url, data, method = "GET") {
        if (typeof data == "string") {
            method = data;
            data = {};
        }

        var config = {
            url,
            method,
        };

        // 参数传递方式
        if (method == "GET") {
            config.params = data;
        } else {
            config.data = data;
        }

        // 闭包
        return new Promise((resolve, reject) => {
            this.$axios(config)
                .then(({ data }) => {
                return resolve(data);
            })
                .catch((err) => {
                err = err && err.toString();
                console.error(err);
                return reject(err);
            });
        });
    }

    //get请求
    get(url, data) {
        return this.request(url, data, "GET");
    }
    
    //post请求
    post(url, data) {
        return this.request(url, data, "POST");
    }
}

挂载

挂载到vue的全局

main.js

import Vue from 'vue'
import XHR from './http.js'
Vue.prototype.$h = new XHR

使用

全局都可以直接使用，而无需引入。

this.$h.post(url, data).then()
this.$h.get(url, data).then()

env环境文件

如果是使用vue创建的项目，可以在根目录创建一个.env文件。将配置信息存放在当前环境中

.env

MODE="dev" //package.json scripts指定mode。vue-cli-service build --mode dev
NODE_ENV="development" //当前环境 development 开发环境  production 开发环境
VUE_BASE_URL="http://127.0.0.1:3001" //存储baseURL地址