axios的使用

官方文档：http://www.axios-js.com/zh-cn/docs/

Axios是基于Promise的HTTP库，可以用在浏览器和node.js中；

安装： npm install axios

cdn： <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

## axios: 最核心技术点是如何拦截请求响应并修改请求参数和响应数据和 axios是如何使用promise搭起来基于xhr的异步桥梁的

一、特性：

　　1：从浏览器中创建XMLHttpRequest

　　2：从node.js创建http请求

　　3：支持 Promise API

　　4：拦截请求和响应

　　5：转换请求数据和响应数据

　　6：取消请求

　　7：自动转换JSON数据

　　8：客户端支持防御XSRF

二、发送请求

1：发送get请求
    // 为给定的ID的user创建请求
   axios.get('/user/ID=12345')
    .then(res => { console.log(res)})
    .catch(err => { console.log(err) })
    // 也可以这样
    axios.get('/user', { params: { ID: 12345} })   // config书写params参数
2：发送post请求
    axios.post('/user', { key: value })
3：执行多个并发请求 助手函数  axios.all() 和 axios.spread(callback)
    function One() { return axios.get('/user/12345') }
    function Two() { return axios.get('/user/12345/permissions')
    axios.all([One(), Two()])
        .then(res => {
           axios.spread( (acct, perms) => { // 两个请求现在都执行完成})}    
    //  并发 请求都执行成功后  的回调函数 是 axios.spread（）

三、axios 的API

可以通过向axios传递相关配置来创建
axios(config)
//发送post请求
axios({
   method: 'post',
   url: '/user',
   data: { key: value }  
})
// 发送get请求
axios({
   method: 'get',
   url: 'user/ID=12345',
  params: { ID: 12345} // 或者这样传递数据          
})

// 发送get请求的默认方法  axios('/user/12345')

四、请求方法的别名

axios.reques(config) axios.get(config) axios.delete(config) axios.post(config)

五、创建实例 axios.create(config)

const instance = axios.create({
   baseURL: 'https://baidu.com/api',
   timeout: 2000, 
   headers: {}
})

六、配置优先级

配置项通过一定的规则合并，request config > instance.defaults > 系统默认优先级高的覆盖低优先级

// 创建一个实例，这时的超时时间为系统默认的0
const instance  = axios.create()

// 通过instance.defaults重新设置超时时间， 比系统默认级别高
instance.defaults.timeout = 2500

//通过request.config重新设置超时时间，  优先级最高
instance.get('/user', { timeout: 1000 })

七、拦截器

可以在then和catch之前拦截请求和响应

// 添加一个请求拦截器
axios.interceptors.request.use( config => {
   // Do something before requests is sent
    return config
}, error => { 
   // Do something with request error
   return Promise.reject(error)  
})
// 添加一个响应拦截器
axios.interceptors.response.use( config => { 
   // Do something with response data
   return response  
}, error => { 
  // Do something with response error
   return Promise.reject(error) 
})

// 移除拦截器
var myInterceptor = axios.interceptors.request.use(() => {})
axios.interceptors.request.eject(myInterceptor)

八、取消请求

使用concel token取消请求 API

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
   cancelToken: source.token 
}).catch(function(thrown){
   if (axios.isCancel(thrown)） {
     console.log('request conceled', thrown.message)
   } else {
      // 错误处理      
   }
})

axios.post('/user/12345', { 
   name: 'new name' 
}, { 
   cancelToken: source.token 
})

// 取消请求 message参数可选
source.cancel('message')
//  二、 也可以通过传递一个executor函数到CancelToken的构造函数来创建cancel token
const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', { 
   concelToken: new CancelToken(function executor(c) {
       // executor函数接受一个cancel函数作为参数
     cancel = c
    })
})
// 取消请求
cancel()
// 可以使用同一个cancel token 取消多个请求