Vue Promise的axios请求封装详解

标题：Vue Promise的Axios请求封装详解

简介：
Vue.js 是一款轻量级、渐进式的 JavaScript 框架，提供了数据驱动和组件化的思想，可用于构建任何复杂的单页面应用。而 Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。在 Vue.js 开发中，我们常常需要用到 Axios 去请求后台数据。为了方便复用，我们需要对 Axios 进行封装，以便于在不同场景中使用。

主体：

1. 安装 Axios 和 Qs 库

在 Vue.js 项目中使用 Axios 之前，我们需要先安装 Axios 和 Qs（用于序列化请求参数）库，可以通过 npm 安装：

npm install axios qs --save

1. 封装 Axios

在 src/utils 目录下新建 request.js 文件，编写如下代码：

import axios from 'axios'

// axios 配置
axios.defaults.timeout = 5000
axios.defaults.baseURL = ''

// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.token) {
      config.headers.Authorization = `Bearer ${localStorage.token}`
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 401 清除token信息并跳转到登录页面
          localStorage.removeItem('token')
          router.replace({
            path: 'login',
            query: { redirect: router.currentRoute.fullPath }
          })
      }
    }
    return Promise.reject(error.response.data)
  })

export default axios

上述代码实现了 Axios 的拦截器，用于在请求发送前和响应返回后进行自定义操作。具体来说，我们在请求头中添加了 token 作为认证信息，同时在响应中处理了 token 过期的情况。

1. 使用封装的 Axios

在 Vue.js 组件中使用封装的 Axios 非常简单，只需导入 request.js 文件即可。

示例1：get 请求

import request from '@/utils/request'

export function getProducts () {
  return request({
    url: '/products',
    method: 'get'
  })
}

以上代码用于获取商品列表，通过 request() 方法封装了 Axios 的 get() 方法，其中包含请求的 url 和 method 等信息。

示例2：post 请求

import request from '@/utils/request'

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

以上代码用于新增商品，通过 request() 方法封装了 Axios 的 post() 方法，并传递了请求参数 data。

结论：
通过封装 Axios，我们可以在 Vue.js 项目中方便地复用请求操作，同时对请求参数和响应数据进行统一处理。除此之外，我们还可以为 Axios 添加其他功能，例如取消请求、设置请求超时、处理请求失败等。