axios学习

axios

1. Vue发送网络请求有非常多的方式，如何选择？

   1. 传统的Ajsx是基于XMLHttpRequest(XHR)
      1. 配置和调用方式非常混乱
   2. jQuery-Ajax
      1. 为了一个网络请求，引用jQuery，得不偿失
   3. Vue1.x，有个Vue-resource
      1. Vue2.0已经去掉，不会再更新

2. 为什么axios

   1. 在浏览器中发送XMLHttpRequests请求
   2. 在node.js中发送http请求
   3. 支持Promise API
   4. 拦截请求和响应
   5. 转换请求和响应数据

3. axios请求方式

   1. axios(config)

      1. axios({
           url: 'http://123.207.32.32:8000/home/multidata',
           method: 'get', //默认get请求
         }).then((res)=>{
           console.log(res)
         })
         

      2. axios({
           url: 'http://123.207.32.32:8000/home/multidata',
           method: 'get', //默认get请求
           params: {   //get请求的参数，不用放在url后面用？拼接了
             type: 'pop',
             page: 1
           }
         }).then((res)=>{
           console.log(res)
         })
         

   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]])

4. axios发送并发请求

   1. axios.all([axios(), axios()]).then(results => {})
      //可以将结果展开
      axios.all([axios(), axios()]).then(axios.spread((res1, res2) => {}))
      

5. 全局配置

   1. //公共的配置
      axios.defaults.baseUrl = "http://localhost:8080"
      axios.defaults.timeout = 5000   //超时时间5秒
      

   2. 常见的配置

      1. 请求地址： url: '/user'
      2. 请求类型： method: 'get'
      3. 根路径： baseUrl: 'http://localhost:8080'
      4. 请求前的数据处理： transformRequest: [function(data){}]
      5. 请求后的数据处理： transformResponse: [function(data){}]
      6. 自定义请求头： headers: {'x-Requested-With': 'XMLHttpRequest'}
      7. URL查询对象： params: {id: 12}
      8. 查询对象序列化函数： paramsSerializer: fucntion(params){}
      9. request body: data:{key: 'aa'}
      10. 超时设置： timeout: 10000
      11. 跨域是否带token: withCredentials: false
      12. 自定义请求处理： adapter: function(resolve, reject, config){}
      13. 身份验证信息：auth: {uname: '', pwd: '1243'}
      14. 响应的数据格式： responseType: 'json/blob/document/arraybuffer/text/stream'

6. axios实例

   1. import axios from 'axios'
      const instance = axios.create({
        bseURL: 'http://localhost:8080',
        timeout: 5000
      })
      //使用
      instance({
        url: '/user'
      }).then((res)=>{})
      

7. 拦截器

   const instance = axios.create({
     baseURL: 'http://localhost:8080',
     timeout:5000
   })
   //拦截某个实例
   //请求拦截
   instance.interceptors.request.use(config=>{
     console.log('请求成功拦截')
     return config
   }, err=>{
     console.log('请求失败拦截')
     return err
   })
   //响应拦截
   instance.interceptors.response.use(response=>{
     console.log('响应成功拦截')
     return response.data
   },err=>{
     console.log('响应失败拦截')
     return err
   })
   //如果要全局拦截，直接用axios.interceptors就可以