「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

vue中axios的封装和使用

一、安装

npm install axios

二、封装

在src目录下创建名为api的文件夹
在api文件夹中创建一个index.js文件用于封装axios：

import axios from "axios"
import { Message } from "element-ui" // 使用element的消息提示弹出

// 消息显示的时间
const messageTime = 3000

// 创建一个axios实例，设置baseURL和timeout或其它设置
const instance = axios.create({
    baseURL: "/api",
    timeout: 30000,
})

// 请求拦截
instance.interceptors.request.use(
    config => {
        return config
    },
    error => {
        Message({
            message: "不能访问到服务器",
            type: "error",
            duration: messageTime || 3000,
        })
        return Promise.error(error)
    },
)

// 响应拦截
instance.interceptors.response.use(
    response => {
        // response.data.code为后端定义的响应状态码，200为成功
        if (!response.data || response.data.code != 200) {
            // response.data.message为后端定义的响应消息
            Message({
                message: response.data.message || "服务器错误",
                type: "error",
                duration: messageTime || 3000,
            })
            return Promise.reject(response.data)
        }
        return Promise.resolve(response.data)
    },
    error => {
        Message({
            message: error.message,
            type: "error",
            duration: messageTime || 3000,
        })
        return Promise.reject(error)
    },
)

export default instance

三、接口

在api文件夹中创建一个user.js文件用于封装用户接口：

import instance from "./index"
import qs from "qs"

/**
 * 列表
 * @param {Object} params
 */
export const queryList = (params) => post('/user/list', params)

/**
 * 详情
 * @param {Object} params
 */
export const queryDetail = (params) => post('/user/detail', params)

/**
 * 添加
 * @param {Object} params
 */
export const add = (params) => post('/user/insert', params)

/**
 * 编辑
 * @param {Object} params
 */
export const edit = (params) => post('/user/update', params)

/**
 * 删除
 * @param {Object} params
 */
export const delete = (params) => post('/user/delete', params)

四、请求

在User.vue页面中请求已经封装好的接口

import { queryList } from "@/api/user"

export default {
    ...
    data() {
        return {
            data: []
        }
    },
    methods: {
        async initData() {
            let params = {}
            let res = await queryList(params)
            if(res.code == 200) this.data = res.data
        }
    },
    created() {
        this.initData()
    },
    ...
}

五、总结

在axios请求拦截中配置token
在axios响应拦截中验证token
使用qs.js处理请求参数

六、链接

Axios
qs.js