【Vue】Axios在Vue中的使用及封装

冷不防 2023-02-17 03:19 2阅读 0赞

### 目录 ###

*   *   *  1. 什么是Axios？
         *  2. Axios方法基本使用
         *   *  2.1 get方法
             *  2.2 post请求
             *  2.3 put请求
             *  2.4 patch请求
             *  2.5 delete方法
         *  3. Axios方法深入
         *   *  3.1 并发请求
             *  3.2 创建Axios实例
             *  3.3 Axios的相关配置
             *  3.4 Axios拦截器
             *  3.5 Axios错误处理
             *  3.6 取消请求
         *  4. Axios封装
         *   *  4.1 get方法封装
             *  4.2 post方法封装

### 1. 什么是Axios？ ###

**概念：** Axios是一个基于Promise的HTTP库，它可以用于浏览器和Node.js（可以用于服务端和客户端）。

**特性：**

*  支持Promise API
 *  可以拦截请求和响应
 *  转换请求数据和响应数据（如，在请求时对敏感信息进行加密，响应时对响应数据进行解密）
 *  取消请求
 *  自动转换JSON数据，不需要手动操作
 *  客户端支持防御XSRF（这是客户端常用的一种攻击方式）

### 2. Axios方法基本使用 ###

首先我们需要引入相关的模块：

import axios from 'axios'; // 引入axios
    import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到

Axios的常见请求方法：get、post、put、patch、delete

*  get：获取数据
 *  post：提交数据（表单提交+文件上传）
 *  put：更新数据（将所有的数据提交给后端）
 *  patch：更新数据（只将修改的数据提交到后端）
 *  delete：删除数据

#### 2.1 get方法 ####

第一种用法：

axios.get('/data.json',{ 
        params:{ 
           id:10
        }
    }).then((res) => { 
        console.log(res)
    })

第二种用法：

axios({ 
       method: 'get',
       url: '/data.json',
       params:{ 
          id:10
       }
    }).then((res) => { 
        console.log(res)
    })

在请求成功之后，会返回状态码`200`，如果第二次请求该资源，没有更改参数，那么会返回状态码`304`，浏览器就会重定向到之前的资源，从而使加载更快。

#### 2.2 post请求 ####

post请求的的格式有两种：

*  `application/json` ：现在用的比较多的数据请求格式
 *  `form-data`：用于表单提交（文件上传，图片上传）

**1. application/json 格式的请求：**

let data = { 
        id:10
    }
    
    axios.post('/data.json',data}).then((res) => { 
        console.log(res)
    })

axios({ 
       method: 'post',
       url: '/data.json',
       data: data
    }).then((res) => { 
        console.log(res)
    })

**2. form-data格式的请求：**

let formData = new FormData()
    for(let key in data){ 
       formData.append(key,data[key])
    }
    axios.post('/data.json',formData}).then((res) => { 
        console.log(res)
    })axios.post

#### 2.3 put请求 ####

let data = { 
        id:10
    }
    
    axios.put('/data.json',data}).then((res) => { 
        console.log(res)
    })

#### 2.4 patch请求 ####

let data = { 
        id:10
    }
    
    axios.patch('/data.json',data}).then((res) => { 
        console.log(res)
    })

注意：put请求和patch请求提交格式都是`application/json`。

#### 2.5 delete方法 ####

第一种方式：

这种方式的参数跟在URL上面

axios.delete('/data.json',{ 
        params:{ 
           id:10
        }
    }).then((res) => { 
        console.log(res)
    })

第二种方式：

这种方式的参数在请求体中

axios.delete('/data.json',{ 
        data:{ 
           id:10
        }
    }).then((res) => { 
        console.log(res)
    })

### 3. Axios方法深入 ###

#### 3.1 并发请求 ####

axios.all([
        axios.get('/data1.json'),
        axios.get('/data2.json')
    ]).then(
        axios.spread((res1, res2) =>{ 
            console.log(res1,res2)
        })
    )

我们需要使用`axios.all`进行并发请求，使用后`axios.spread`对返回的数据进行解析。.

需要注意：多个请求要写在一个数组中。

#### 3.2 创建Axios实例 ####

当后端接口地址有多个，并且超时时长不一样时，我们可以创建Axios实例:

//创建Axios实例
    let instance1 = axios.create({ 
        baseURL: 'http://localhost:8080',
        timeout: 2000
    })
    let instance2 = axios.create({ 
        baseURL: 'http://localhost:8000',
        timeout: 8000
    })
    //使用
    instance1.get('/data.json').then( res = >{ 
        console.log(res)
    })
    instance2.get('/data.json').then( res = >{ 
        console.log(res)
    })

#### 3.3 Axios的相关配置 ####

**1. axios 的实例配置**  
实际上，我们直接使用的axios也是一个实例，它是默认的实例。

我们可以对axios实例进行基本的设置：

let instance = axios.create({ 
        baseURL: 'http://localhost:8080', // 请求的域名，基本地址
        timeout: 5000,                    // 请求超时时长，单位为ms
        method: 'get',                    // 请求方法
        url: '/data.json',                // 请求路径
        headers: {                         // 请求头
            token: ''                     // 当前登录的人的信息
        },
        params: { }                        // 传递请求参数，将请求参数放在URL中
        data: { }                          // 传递请求参数，将请求参数放在请求体中
    })

使用以下形式对实例配置进行修改：

instance.defaults.timeout = 3000
    instance.defaults.baseURL = 'http://localhost:8000'

关于token，一般在登录完成之后，会将用户的token通过localStorage或者cookie存储在本地，然后用户每次在进入页面的时候，会首先在本地存储中读取token，如果存在，则说明用户登陆过，则更新token的状态。  
之后在每次请求时，都会在请求的header中携带token，后端人员就可以根据携带的token来判断登录是否过期，如果未携带，则说明未登录过。

**2. axios 的全局配置**

我们可以使用以下形式对axios进行全局配置：

axios.defaults.timeout = 5000
    axios.defaults.baseURL = 'http://localhost:8080'

**3. axios请求配置**

当实例配置不能满足需要，而要进行修改时，按以下形式进行修改：

instance.get('/data.json',{ 
        timeout: 1000
    })

注意：以上三种配置具有优先级，**请求配置 > 实例配置 > 全局配置**

#### 3.4 Axios拦截器 ####

拦截器用于在请求或响应被处理前对它们进行拦截。

拦截器分为两种：**请求拦截器**和**响应拦截器**。

**1. 请求拦截器**

请求拦截器的作用是在发出请求之前设置一些信息：

let interceptors = axios.interceptors.request.use( config =>{ 
       // 在请求前做些什么
       return config  
    }, err =>{ 
       // 在请求错误时做什么
       return.Promise.reject(err)
    })

**2. 响应拦截器**

响应拦截器的作用是在获取数据之前对数据进行一些加工处理：

axios.interceptors.response.use( res =>{ 
       // 在请求成功对响应数据做处理
       return res 
    }, err =>{ 
       // 响应错误做些什么
       return.Promise.reject(err)
    })

对于上述请求拦截，成功的数据会到`then`中，失败的数据会到`catch`中：

axios.get().then( res => { }).catch( err => { })

**3. 取消拦截器**

axios.interceptors.request.eject(interceptors)

一般情况下，我们设置拦截器都是对axios的实例进行设置，这样避免全局污染。

let instance = axios.create({ })
    
    instance.interceptors.response.use()

#### 3.5 Axios错误处理 ####

在实际的开发中，一般会添加统一的错误处理，较少使用`catch`对每个请求的错误进行处理。

客户端常见的状态码有：401、404  
服务端常见的状态码有：500、502（服务器作为网关或代理，从上游服务器收到无效响应）  
![在这里插入图片描述][20200612165823429.png]

#### 3.6 取消请求 ####

取消正在进行的HTTP请求，格式如下：

let source = axios.CancelToken.source();
    
    axios.get('/data.json', { 
       cancelToken: source.token
    }).catch(err => { 
      // 处理错误
      console.log(res)
    });
    
    // 取消请求（message 参数是可选的，它会进入catch中）
    source.cancel('message');

### 4. Axios封装 ###

在使用Axios请求时，为减少代码冗余，可以对请求进行简单的封装。那接下来就来对`get`和`post`方法进行封装：

#### 4.1 get方法封装 ####

我们定义一个`get`函数，它有两个参数，第一个参数表示请求的URL地址，第二个参数表示需要携带的参数。`get`方法返回一个`Promise`对象，当请求成功时，返回成功值`resolve`，失败返回值`reject`。最后通过`export`导出函数。

export function get(url, params){     
        return new Promise((resolve, reject) =>{         
            axios.get(url, {             
                params: params        
            }).then(res => { 
                resolve(res.data);
            }).catch(err =>{ 
                reject(err.data)        
        })    
    });}

#### 4.2 post方法封装 ####

post方法封装和get原理一样，但是需要注意的是，post方法需要对提交的参数对象进行序列化操作。所以使用node的qs模块来序列化参数，不然后端拿不到数据。

我们需要引入QS：

import QS from 'qs';

export function post(url, params) { 
        return new Promise((resolve, reject) => { 
             axios.post(url, QS.stringify(params))
            .then(res => { 
                resolve(res.data);
            })
            .catch(err =>{ 
                reject(err.data)
            })
        });
    }

需要注意的是：get请求的第二个参数就是一个对象\{\}，这个对象的params属性是一个参数对象。而post的第二个参数就是一个参数对象。

[20200612165823429.png]: https://img-blog.csdnimg.cn/20200612165823429.png?