aixos的自定义配置（post请求）

在vue项目中想要设置不同的请求那么我们需要通过axios.create()来创建自定义的axios请求方式。

这是自己配置的axios，可以参考参考。

import axios from 'axios'

class HttpRequest {
    //类的方法有参数(未传参的时候默认获取backUrl1的值-->请求地址)
    //backUrl1已经在全局配置
    constructor(baseUrl = backUrl2) {
        //this指代创建的实例
        this.baseUrl = baseUrl
        //创建一个队列
        this.queue = {}
    }
    //返回一个配置(全局配置)
    getInsideConfig() {
        const config = {
            baseURL: this.baseUrl,//请求地址
            headers: {

            }
        }
        return config
    }
    //添加一个拦截器(参数就是创建的实例,第二个参数就是请求的地址)
    interceptors(instance, url) {
        //添加请求拦截器(俩个参数，第二个是请求出现错误的时候调用)
        instance.interceptors.request.use(config => {
            //添加请求前的控制
            //添加全局的loading...
            //比如全局组件是一个叫Sping的遮罩层，这时可以在这里控制它的显示比如Sping.show()
            //如果当前的队列的值为0那么就进行loading的显示
            if (!Object.keys(this.queue).length)
                // Sping.show()
                this.queue[url] = true;
            return config
        }, error => {
            //返回错误信息
            return Promise.reject(error)
        })
        //添加一个响应拦截器(第一个参是服务端返回的值，第二个)
        instance.interceptors.response.use(res => {
            //响应后我们把队列的信息删除
            delete this.queue[url]
            return res
//这里是一个注意点 如果直接返回res则是会axios附带的很多信息 像config，header之类的。如果你想像ajax只返回data数据的话  把 return res 改为 return.data
        }, error => {
            //响应后我们把队列的信息删除
            delete this.queue[url]

            return Promise.reject(error)
        })

    }


    //创建一个请求
    //optionds是一个配置
    request(options) {
        //用axios创建一个实例(这是一个函数)
        const instance = axios.create()
        //合并配置会把参数中的内容合并到一个对象去（如果有相同key值前面的会覆盖）
        options = Object.assign(this.getInsideConfig(), options)
        this.interceptors(instance, options.url)
        return instance(options)
    }

}
export default HttpRequest

全局配置中的地址的变量名必须是baseURL（这个很重要）

之后需要创建文件来引用，同时需要封装一个公用的axios的方法。

url_api是用来存放axios的使用方式的。统一吧url放置在这个文件，方便修改，使得代码的可维护性更好。

此文件中有post写法和get写法。

 

使用axios的时候记得安装axios。在js调用的时候只需要获取你当前要的axios方式传递数据和成功后的方法和失败的方法就可以。省去了很多重复的工作，同时我们后期如果后端给的接口地址发生变化的时候只需要改一处就可以了。