如何对axios二次封装

1.首先在终端中下载axios

使用 npm:

npm install axios

使用 bower:

bower install axios

使用 cdn:

2.在main.js中配置axios

import http from 'axios'

需要注意 axios不是一个插件 需要绑定在vue的prototype中 给它取名为$http

Vue.prototype.$http = http

3.在文件中使用axios，一般写在生命周期钩子中 

  mounted() {
        this.$http.get('/user?ID=12345')
            .then(function (response) {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    },

4.二次封装axios

我们的想法是将axios抽象成一个工具类

在项目文件中新建文件夹api，在api中创建axios.js文件

接着在项目中新建文件夹config，在config中新建index.js文件 作为配置文件

在index.js中配置项目的相关配置

export default {
    baseUrl: {
        dev: '/api/', //开发环境
        pro: ''    //生成环境
    }
}

在axios.js中对配置文件进行引入

对axios进行简单的二次封装

import axios from 'axios'
import config from '../config'

const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

class HttpRequest {
    constructor(baseUrl) {
        this.baseUrl = baseUrl
    }

    getInsideConfig() {
        const config = {
            baseUrl: this.baseUrl,
            header: {}
        }
        return config
    }
    interceptors(instance) {
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });

        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
            // 对响应数据做点什么
            return response;
        }, function (error) {
            // 对响应错误做点什么
            return Promise.reject(error);
        });
    }
    //接口请求调用此处
    request(options) {
        const instance = axios.create()
        options = { ...this.getInsideConfig(), ...options }
        this.interceptors(instance)
        return instance(options)
    }
}

export default new HttpRequest(baseUrl)