vue项目Axios 简单的封装

1. 安装 Axios 和 qs

npm install axios qs --save

2. 在 Vue 项目中创建一个 api 文件夹，用来存放所有的接口请求方法。

3. 在 api 文件夹中新建一个 request.js 文件，用来封装 Axios 请求。

import axios from 'axios'
import qs from 'qs'

/**
 * axios 请求过滤器
 */
axios.interceptors.request.use(config => {
    const token = localStorage.getItem('token')
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token
    }
    return config
}, error => {
    return Promise.reject(error)
})

/**
 * axios 响应过滤器
 */
axios.interceptors.response.use(response => {
    if (response.data.code === 401) {
        localStorage.removeItem('token')
        window.location.reload()
    }
    return response.data
}, error => {
    return Promise.reject(error.response.data)
})

/**
 * axios 封装请求
 */
export default {
    get(url, params = {}) {
        return axios.get(url, {
            params: params
        })
    },
    post(url, params = {}) {
        return axios.post(url, qs.stringify(params))
    },
    put(url, params = {}) {
        return axios.put(url, qs.stringify(params))
    },
    delete(url, params = {}) {
        return axios.delete(url, {
            params: params
        })
    }
}

在上面的代码中，我们使用 axios.interceptors 来注册请求过滤器和响应过滤器。在响应过滤器中，如果返回的状态码为 401，则移除本地存储中的 token，然后刷新页面，再次跳转到登录页。这是一种常见的处理方式，防止用户长时间未活动导致 token 失效后继续使用应用程序。

在请求的方法中，我们封装了四种请求方式：get、post、put、delete，分别对应 HTTP 的四种请求方式。其中，get 请求默认将参数拼接在 url 中，而 post、put 请求将参数进行序列化，然后发送给服务器。

4. 在具体的业务逻辑代码中，调用封装的请求方法。

import request from 'api/request.js'

// get 请求
request.get('/user/list', {currentPage: 1, pageSize: 10}).then(data => {
    console.log(data)
})

// post 请求
request.post('/user/create', {name: 'Tom', age: 20}).then(data => {
    console.log(data)
})

// put 请求
request.put('/user/update/1', {name: 'Jerry', age: 22}).then(data => {
    console.log(data)
})

// delete 请求
request.delete('/user/delete/1').then(data => {
    console.log(data)
})