Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

下面是“Vue中axios的封装（报错、鉴权、跳转、拦截、提示）”的完整攻略：

一、为什么要封装Axios

在Vue项目开发中，我们经常会使用Ajax技术来请求后端数据，而Axios作为当前最流行的Ajax库之一，其简单易用，能够请求RESTful API并支持Promise API等特性，因此备受青睐。然而，为了提高代码的可读性和复用性，我们需要对Axios进行封装，以方便查询、修改和维护。

二、Axios封装

首先，在src目录下新建一个api目录，用于存放所有与后端交互的文件。

然后，我们在api目录中新建一个request.js文件，该文件用于封装Axios：

// 引入axios库
import axios from 'axios'

// 创建请求对象实例
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 如果有token，就携带token
    if (localStorage.token) {
      config.headers['Authorization'] = 'Bearer ' + localStorage.token
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401: // 未登录
          router.replace({
            path: '/login',
            query: {redirect: router.currentRoute.fullPath}
          })
          break
        case 403: // token过期
          localStorage.removeItem('token')
          router.replace({
            path: '/login',
            query: {redirect: router.currentRoute.fullPath}
          })
          break
        case 404: // 未找到
          break
        case 500: // 服务器错误
          break
      }
    }
    return Promise.reject(error.response.data)
  }
)

export default service

这段代码对Axios进行了封装，具体内容如下：

1. 创建了一个名为service的请求对象；
2. 对请求进行了基础的配置：设置了请求的基础url，设置了请求的超时时间；
3. 对请求进行了拦截：设置了request拦截器、response拦截器；
4. 对response拦截器进行了两项主要操作：处理请求成功的response数据，处理请求失败的error数据。

三、示例说明

下面我们来看两个例子，详细说明如何利用上述封装后的Axios进行后端数据交互。

1. GET请求

import request from '@/api/request.js'

export function getData(params) {
  return request({
    url: '/api/data',
    method: 'get',
    params: params
  })
}

在上述代码中，我们引入了封装后的request.js文件，然后通过getData(params)函数发起get请求。在函数中，我们需要传入一个params参数对象，用于传递get请求的参数（例如页码、每页条数等）。

2. POST请求

import request from '@/api/request.js'

export function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data: data
  })
}

在上述代码中，我们同样引入了封装后的request.js文件，然后通过login(data)函数发起post请求。在函数中，我们需要传入一个data参数对象，用于传递post请求的参数（例如用户名、密码等）。

四、总结

通过对Axios的封装，我们可以提高代码的可维护性和可复用性，让我们的项目开发更加高效。同时，我们也可以通过以上两个示例，更好地理解如何在Vue项目中使用封装后的Axios进行后端数据交互。