axios简介

当项目中需要使用到网络请求时，从原生ajax（基于XMLHttpRequest），jQuery-Ajax，vue-resource（已淘汰），再到现在的axios，有很多种方式可以选择。

axios的优点在于：

1. 在浏览器发送XMLHttpRequest请求。

2. 在node.js发送http请求。

3. 支持Promise。

4. 可以拦截请求和响应。

5. 转换请求和响应。

axios的请求方式：

1. axios(config)

2. axios.request(config)

3. axios.get(url,config)

4. axios.delete(url,config)

5. axios.head(url,config)

6. axios.post(url,data,config)

7. axios.put(url,data,config)

8. axios.patch(url,data,config)

axios发送并发请求，可以用.all()对并发请求进行合并

 axios.all([ axios( 第一次网络请求 )

            ,axios( 第二次网络请求 )]

          )
     
     .then(results=>{
     
     //结果处理语句 
     
     })

返回的results是一个数组，是前面n次请求的结果的合并数组。

可以用.spread() 进行results分割：

 axios.all([axios( //第一次网络请求 ),axios( //第二次网络请求 )])
     
     .then(axios.spread( (res1,res2) => {
     
        console.log(res1);
     
        console.log(res2)
     
       })

     )

axios的全局配置：

 axios.defaults.baseURL = "http://127.1.1.1"
 ​
 axios.defaults.timeout = 1000

常见配置选项：

1. 请求地址： url:'/user'

2. 请求类型：method:'get'

3. 请求根路径：baseURL:'http://127.1.1.1'

4. 请求前的数据处理：transformRequest:[function(data){}]

5. 请求后的数据处理：transformResponse:[function(data){}]

6. 自定义请求头： headers:{'X-Requested-With': 'XMLHttpRequest'}

7. url查询对象：params:{id:12}

8. 查询对象序列化函数：paramsSerializer:function(params){}

9. request body：data:{key:'xx'}

10. 超时设置ms：timeout:1000

11. 跨域是否带token：withCredentials:false

12. 自定义处理请求：adapter:function(resolve,reject,config){}

13. 身份验证信息：auth:{uname:'xiaoming',pwd:'12'}

14. 响应的数据格式：json/blob/document/arraybuffer/text/steam responseType: 'json'

axios实例

给axios创建多个实例，在实例中可以为此实例创建一些默认配置信息，当使用某个实例，才会触发那个实例的配置。

创建实例：

const instance = axios.create({ baseURL:'http://127.1.1.1', timeout:1000 })

使用实例：

 instance({ url:'/user' })

axios的封装形式一：

 import axios from 'axios'
 ​
 export function request( config, success, fail ){
 ​
     const instance = axios.create({ baseURL:'http://127.1.1.1', timeout: 1000 })
     
     instance(config)
     
     .then( res=>{
     
         success(res)
         
     })
     
     .catch( err=>{
     
         fail(err)
         
     })
     
 }

组件中：

import { request } from './request.js'
 ​
 request( { url:'/user' }, 
         res => { console.log(res) }, 
         err=>{console.log(err) } 
        )

axios的封装形式二：

export function request(config){
    return new Promise(resolve, reject)=>{
        const instance = axios.create({
            baseURL: 'http://127.1.1.1',
            timeout: 1000
        })
        instance(config).then(res=>{ resolve(res) })
                        .catch(err=>{ reject(err) })   
    })
}

组件中：

request({ url:'/home' }).then(res=>{ console.log(res) })
                        .catch(err=>{ console.log(err) })

axios的封装形式三：

因为axios实例本身就是一个axiosPromise，可以不另外用一个Promise来进行封装，直接返回此实例即可。

export function request(config){
    const instance = axios.create({
        baseURL: 'http://127.1.1.1',
        timeout: 1000
    })

    return instance(config)
}

组件中：

request({ url:'/home' }).then(res=>{ console.log(res) })
                        .catch(err=>{ console.log(err) })