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

CUG-GZ

746人浏览 · 2020-06-12 21:25:06

CUG-GZ · 2020-06-12 21:25:06 发布

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（服务器作为网关或代理，从上游服务器收到无效响应）
在这里插入图片描述

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)
        })
    });
}