Vue.js--axios详解

- 日理万妓 2021-08-24 23:59 479阅读 0赞

### axios ###

axios是一个基于Promise，同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。

安装axios

npm install axios --save

### axios的请求方式 ###

*  axios(config)
 *  axios.request(config)
 *  axios.get(url \[, config\])
 *  axios.delete(url \[, config\])
 *  axios.head(url \[, config\])
 *  axios.post(url \[, data \[,config\]\])
 *  axios.put(url \[, data \[, config\]\])
 *  axios.patch(url \[, data \[, config\]\])

直接发起GET请求：

import axios from 'axios'
    
    //1. 没有请求参数
    axios.get('http://123.207.32.32:8000/home/multidata').then(res => { 
      console.log(res);
    }).catch(err => { 
      console.log(err);
    })
    
    //2.有参数
    axios.get('http://123.207.32.32:8000/home/data?type=sell&page=3', 
      { params: { type: 'sell', page: 1}})
      .then(res => { 
        console.log(res);
      }).catch(err => { 
        console.log(err);
      })

基于Promise，可以执行多个并发请求：

*  使用axios.all(\[\])可以放入多个请求的数组
 *  axios.all(\[\])返回的是一个数组，使用axios.spread可以将数组解构

//发送并发请求
    
    axios.all([
      axios({ 
        url: 'http://123.207.32.32:8000/home/multidata'
      }),
      axios({ 
        url: 'http://123.207.32.32:8000/home/multidata'
      })
    ]).then(axios.spread((res1, res2) => { 
        console.log(res1);
        console.log('`````````');
        console.log(res2);
    }))

### 全局配置 ###

在上面的示例中，我们的BaseRUL是固定的

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

### 常见的配置选项 ###

*  请求地址：  
    url:’/user
 *  请求类型：  
    method:‘get’
 *  请求跟路径：  
    vaseURL:‘http://www.mt.com/api’
 *  请求前的数据处理：  
    transformRequest:\[function(data)\{\}\]
 *  请求后的数据处理：  
    transformResponse:\[function(data)\{\}\]
 *  自定义的请求头  
    headers:\{‘x-Requested-With’:‘XMLHttpRequest’\}
 *  RUL查询对象  
    params: \{id: 12\}

### axios实例 ###

当我们从axios模块中导入对象时，使用的实例是默认实例。当给实例设置一些默认配置时，这些配置就被固定下来了。但是后续开发中，某些配置可能会不太一样。比如某些请求需要使用特定的baseRUL或者timeout或者coutent-Type等。这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]

### 拦截器 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][20200203124828109.png]

### 拦截器的作用 ###

错误拦截：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 5]  
请求拦截中错误拦截很少，通常都是配置相关的拦截：

*  可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

响应拦截：

响应的成功拦截中 ，主要是对数据进行过滤：  
![在这里插入图片描述][20200203125105783.png]  
![在这里插入图片描述][20200203125118176.png]  
响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/bb23fb441f5340fe8c22435e04d23658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 1]: /images/20210813/d52d31b2b9d84308834b3070a238266e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 2]: /images/20210813/2357c3227cd6480e98cd48b27eb74a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 3]: /images/20210813/ef4b24d8261941ba8987faf275956194.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 4]: /images/20210813/9473c10022f84d468824269241f8689b.png
[20200203124828109.png]: /images/20210813/3a6e3edcbee2446a9318c3bac66eb619.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 5]: /images/20210813/a0da22e3e2c047e8ae38f2a6a0c856f5.png
[20200203125105783.png]: /images/20210813/c37c7861fa1a477aa6780f3d65377e87.png
[20200203125118176.png]: /images/20210813/c7bf931d3da040e785e88689eea06c12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70 6]: /images/20210813/5dc3a119b5014858a5a822209d20594e.png