axios学习和使用

网络请求的方式

1. 传统的Ajax，基于XMLHttpRequest（不推荐）

   • 配置调用方式混乱（回调地狱）

2. jQuery-Ajax (在vue开发中不推荐)

   • 相对于传统的Ajax非常好用
   • 但是jQuery的代码1w行，vue的代码1w行，在vue开发中，完全没有为了用网络请求就引用一个重量级的框架

3. axios(推荐)

   • 在Vue-resource停止更新之后，axios是vue作者推荐的一款轻便的基于 promise 的 HTTP 库

认识Axios

1. 可以理解为 ajax i/o system 的缩写
2. 功能特点：
   • 在浏览器中发送 XMLHttpRequests 请求
   • 在 node.js 中发送 http请求
   • 支持 Promise API
   • 拦截请求和响应
   • 转换请求和响应数据
   • 。。。
3. 支持多种请求方式：
   • axios(config)
   • axios.request(config)
   • axios.get(url[, config])
   • axios.delete(url[, config])
   • axios.head(url[, config])
   • axios.put(url[, data[, config]])
   • axios.patch(url[, data[, config]])

发送基本请求

1.  **发送get请求演示**
    import axios from 'axios'
    export default {
      name:'app',
      created(){  //在vue的生命周期函数中
        //提问：为什么没有跨域的问题？
        //1.没有请求参数
        axios.get('http://123.207.32.32:8000/api/v1')
           .then(res=>{
           console.log(res);
          }).catch(err=>{
            console.log(err)
          })
   
        //2.有参数
        axios.get('http://123.207.32.32:8000/api/v1',
        {params:{type:'sell',page:1}})
        .then(res=>{
          console.log(res)
        }).catch(err=>{
          console.log(err)
        })
      }
    }
   

2.   **发送并发请求**
     created(){ //在vue的生命周期函数中
       axios.all([axios.get('http://123.207.32.32:8000/api'),
                  axios.get('http://123.207.32.32:8000/api')],
                  {params:{type:'sell',page:1}})
               .then(axios.spread((res1,res2)=>{
                 console.log(res1);
                 console.log(res2);
               }))
     }
   

全局配置

1. 在开发中可能很多参数都是固定的，这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

2.  //提取全局的配置
    axios.defaults.baseURL = 'http://123.207.32.32:8000'
    //发送并请求
    axios.all([axios.get('/api'),
               axios.get('/home'),
               {params:{type:'sell',page:1}}])
            .then(axios.spread((res1,res2)={
              console.log(res1);
              console.log(res2);
            }))
   

3. 常见的全局配置
   • 1.请求地址：url: '/user'    2.请求类型：method: 'get',
   • 3.请根路径：baseURL: 'http://www.mt.com/api'   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: 'aa'}   10.超时设置s：timeout: 1000,
   • 11.跨域是否带Token：withCredentials: false   12.自定义请求处理：adapter: function(resolve, reject, config){},
   • 13.身份验证信息：auth: { uname: '', pwd: '12'}   14.响应的数据格式 json / blob /document /arraybuffer / text / stream：responseType: 'json',

axios的实例

1. 为什么要创建axios的实例呢?

• 当给该实例设置一些默认配置时, 这些配置就被固定下来了.但是后续开发中, 某些配置可能会不太一样.
• 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

2.  //创建新的实例
    const axiosInstance =axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout:5000,
      headers:{
        'Content-Type':'application/x-www.from-urlencoded'
      }
    //发送网络请求
    axiosInstance({
      url:'/api',
      method:'get',
    }).then(res=>{
      console.log(res);
    }).catch(err=>{
      console.log(err);
    })
    })
   

axios封装

1.  //创建的axios文件中
    import originAxios from 'axios'
    export default function axios(option){
      return new Promise((resolve,reject)={
        //1.创建axios实例
        const instance = originAxios.create({
          baseURL:'/api',
          timeout:5000,
          headers:''
        });
   
        //2.传入的对象进行网络请求(optiond)
        instance(option).then(res=>{
          resolve(res);
        }).catch(err=>{
          reject(err);
        })
        //对第二步的简写(因为axios本身返回的就是一个Promise)
        //去掉export下面return Promise的那一行
        return instance(config)
      })
    }
   

Axios拦截器

1. axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理

2.  **请求拦截**
    instance.interceptors.request.use(config=>{
      console.log('来到了request拦截的success中')
      // 1.当发送网络请求时，在页面中添加了一个loading组件，作为动画
   
      // 2. 某些请求要求用户必须登陆，判断用户是否有token，如果没有token跳转到login页面
   
      // 3.对请求的参数进行序列化
      config.data =qs.stringify(config.data)
      console.log(config)
       
       //当拦截完了一定要记得将拦截返回
       return config
    })
   
    use()中还有一个err参数，表示请求错误后的拦截，请求拦截中错误拦截比较少，通常都是配置相关的拦截，可能的错误比如请求超时时，可以将页面跳转到一个错误的页面中
   

3.    **响应拦截**
      响应的成功拦截中，主要是对数据进行过滤
    instance.interceptors.response.use(response=>{
      console.log("来到了response拦截success中");
      return response.data
      响应失败的拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面
    },err => {
      console.log('来到了response拦截的failure中')
      if( err && err.response){
        switch(err.response.status){
          case 400:
            err.message = '请求错误'，
            break;
          case 401:
            err.message = '未授权的访问'，
            break;
        }
      }
      return err
    })