axios的使用

Axios的使用：
    1：安装axios
        npm install axios --save
    2：引入axios
        import axios from 'axios'
        将axios挂载到vue原型链上：
            Vue.prototype.$axios=axiosvue
        挂载之后就可以在整个项目里随时使用，使用方式：
            this.$axios.方法()
    3：发送请求：
        --发送get请求：
            --方式一：将参数拼接到apiurl中
                axios.get(api地址?参数)
                .then((data)=>{
                    //获取成功的回调函数
                })
                .catch((error)=>{
                    //获取失败处理函数
                })
            --方式二：若不想手动拼接参数，也可将参数放置于params内,vue将自动拼接
                axios.get("api",{
                    params:{
                        id:123456,
                        name:"ss"
                    }
                })
                .then((data)=>{
                    //数据获取成功回调函数
                })
                .catch((error)=>{
                    //数据获取失败的回调函数
                })
        
        --发送post请求：
            注意：
            form-data:?name=kkk&id=544554
            x-www-form-urlencoded:{name:'kkk',id:544554}
                axios接收的post参数格式为from-data格式
                需要将格式转换掉，如果未转换参数是无法正常传递的。
                转换方法：
                import qs form 'qs' 引入qs库
                使用qs库的qs.stringify()方法即可。
                实例：
                    $.axios.post(url,qs.stringify({
                        //参数列表
                    }))
                    .then()
                    .catch()
            --关于qs库：
                安装：npm install qs
                qs.parse()方法将url解析成对象的形式
                qs.stringify()将对象序列化成url的形式，以&进行拼接。
            --注：通常我们并不会在每次发送post请求时都使用qs来进行转换，比较麻烦。axios提供了拦截器，我们可以在拦截器内统一进行处理。
            axios.post(api,{
                //参数列表
                id:123456,
                name:"ss"
            })
            .then((data)=>{
                //成功的回调函数
            })
            .catch((error)=>{
                //失败的处理函数
            })
            
        --执行ajax请求，手动选择配置一些参数：
            axios({
                method:'post', //选择请求方式
                url:'', //请求地址
                data:{
                    //请求参数
                }
            });
            .then((data)=>{
                //成功的回调函数
            })
            .catch((error)=>{
                //失败的处理函数
            })
            注：需要注意的是和post方式一样，需要对向服务器传递的参数进行qs.stringify()处理，否则无法正常传递数据。
            
        --执行多个并发请求：
            axios允许执行并发请求，方式：
            --1：通过定义多个fun,每个fun return一个axios请求。(一定要记得return，否则会返回undefined)
            --2：调用axios.all()方法，传入一个数组，数组内元素为要执行的多个请求的函数：
                axios.all(funName1(),funName2(),...)
                .then()
                .catch()
            注：axios.all会在所有请求都完成之后才会执行回调。当所有的请求都完成后，会收到一个数组，包含着相应对象，其中的顺序和请求发送的顺序相同，可以使用axios.spread()分割成多个单独的响应对象。
            --4：使用实例：
                //定义多个请求fun
                getSong1(){
                    let api="api接口地址"
                    return    this.$axios.get(api)
                }
                getSong2(){
                    let api="api接口地址"
                    return    this.$axios.get(api)
                }
                //使用axios.all()执行并发请求
                this.$axios.all([getSong1(),getSong2()])
                .then(
                    this.$axios.spread(function(data1,data2,...){
                        //处理
                    })    
                )
                .catch()
    4：axios拦截器：
        拦截器的作用？
            拦截器是axios为我们最常用的功能之一，拦截器分为请求拦截器与响应拦截器。
            请求拦截器：用来在发送请求之前拦截每次请求或者指定的请求，并可修改配置项，进行一定的处理。
                比如：上面提到post()传递的参数需要使用qs.stringify()转换成x-www-form-urlencoded格式。
                之前我们每次使用post请求时都要使用qs转换一次，非常麻烦，此时我们就可以在拦截器里统一进行处理处理：
                首先通过axios.config.method获取当前请求时get请求还是post，如果是post再调用qs.stringify()转换数据：
                    axios.interceptors.request.use(function(config){
                            if(config.method=="post"){
                                config.data=qs.stringify(data);
                            }
                            return config;
                        },function(error){
                            return Promise.reject(error);
                        }
                    )
                经过以上处理后，我们在调用axios.post方法时就无序每次调用qs转换数据格式了。请求拦截器会自动帮我们转换。
                以上只是请求拦截器的一种简单的使用，我们还可以通过请求拦截器每次自动传递token等等。
            响应拦截器：
                可以在每次http请求后拦截住每次或者指定http请求，并可修改返回的结果项。
                一般我们会用响应拦截器来判断服务端返回的请求状态码（status）,根据状态码验证本次请求的状态。例如200为成功，404为请求不存在，500系列为服务端错误...
                axios.interceptors.response.use(function(response){
                    if(response.status==200){
                        console.log("请求成功！")
                    }
                },function(error){
                    switch(error.response.status){
                        case 401:
                            console.log("参数缺失，请检查请求参数是否正常！")
                            break;
                        case 402:
                            ...
                            break;
                        default:
                            ...
                    }
                    return Promise.reject(error.response);
                })

               以上只是一个简单的例子，更多的作用是根据项目来添加或决定的。
    5：关于请求配置：
        --1：响应组成：
            response由以下几个部分组成：
                data:{},//服务端返回的数据
                status:200,//服务端返回的状态码
                statusText:'ok',//服务端返回的状态信息
                headers:{} //响应头，所有的相应头名称都是小写
                confing:{},//axios的请求配置
                request:{}//请求
        --2：配置优先级：
            axios的配置通过一定的规则合并，遵循以下规则：
                request confing > instance.defaults（实例的默认值） > 系统默认
        --3：axios的全局默认配置：
            //配置默认的api地址
                axios.defaults.baseURL = 'https://api.example.com';
            //配置授权信息，如果没有就不需要
                axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
            //配置默认的请求头
                axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        --4：请求配置：
                创建请求时可以用的配置选项。只有URL的必传的。如果method没有指定，默认是get方式。
                url：
                    请求的服务器url
                method：
                    请求方式（get/post）
                baseURL:
                    baseURL将自动加在url前，如果使用绝对url不必设置baseUrl，通过设置baseUrl可以简化同一个域名下的url。
                params{}：
                    params是即将与请求一起发送的URL参数
                data{}：
                    请求主体发送的数据
                timeout：
                    time指定请求超时的毫秒数（0表示无超时时间），如果请求超过设定的毫秒数请求将被中断。
                auth：
                    auth表示应该使用 HTTP 基础验证，并提供凭据。这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
                responseType：
                    `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
                proxy:{
                    host:'127.0.0.1',
                    port:9000,
                    auth:{
                        
                    }
                }
                    proxy定义代理服务器的主机名称和端口，auth表示http基础验证应用于连接代理，并提供凭证。
                ...（以上只是一些常用的，详细需查看axios官方文档。）
    6：跨域处理：
        axios不支持跨域，若跨域可使用jsonp插件。或者交由后端处理允许跨域即可，正常情况下上线后前后端代码是在同一服务下，不存在跨域。

    7：关于axios的封装：

        后续补上。