封装axios

最新推荐文章于 2022-11-11 16:14:13 发布

原创最新推荐文章于 2022-11-11 16:14:13 发布 · 827 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #vue.js #javascript

本文介绍了在Vue.js项目中为什么要对axios进行封装，并详细讲述了封装axios的步骤，包括创建请求配置文件和编写请求数据接口的方法。通过封装，可以在项目中方便地管理和修改请求域名，简化了后期维护的工作。

一.什么是axios？

是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端简单的理解就是ajax的封装
在使用Vue.js框架开发前端项目时会经常发送ajax请求服务端接口在开发过程中需要对axios进一步封装方便在项目中的使用

二、为什么要对axios进行封装

可以更方便的管理和修改axios请求域名，假设是一个庞大的项目，只是修改域名就会花费很多的时间和精力，如果对axios进行封装，便能省去了很多的步骤

第一步：

首先在开始之前，先安装axios插件

在src目录下创建utils文件夹，里面创建一个http.js文件，文件内容如下：

// 首先引入axios插件
import axios from "axios";
// 引入element-plus插件
import { ElMessage } from 'element-plus'
// 网址是后台管理系统的接口
const http = axios.create({
    baseURL: "https://www.liulongbin.top:8888/api/private/v1",
    timeout: 10000
})

// 请求拦截
http.interceptors.request.use(config => {
    let token = localStorage.getItem('token') || ''
    config.headers.Authorization = token
    return config
}, err => {
    throw new Error(err)
})


// 响应拦截
http.interceptors.response.use(res => {
    // status 是返回的状态码   msg 是返回状态码的信息
    let { status, msg } = res.data.meta
    switch (status) {
        case 200:
            ElMessage({
                message: msg,
                type: 'success',
            })
            break;
        case 201:
            ElMessage({
                message: '创建成功',
                type: 'success',
            })
            break;
        case 204:
            ElMessage({
                message: '删除成功',
                type: 'success',
            })
            break;
        case 400:
            ElMessage({
                message: '请求的地址不存在或者包含不支持的参数',
                type: 'success',
            })
            break;
        case 401:
            ElMessage({
                message: '未授权',
                type: 'success',
            })
            break;
        case 403:
            ElMessage({
                message: '被禁止访问',
                type: 'success',
            })
            break;
        case 404:
            ElMessage({
                message: '请求的资源不存在',
                type: 'success',
            })
            break;
        case 422:
            ElMessage({
                message: '发生一个验证错误',
                type: 'success',
            })
            break;
        case 500:
            ElMessage({
                message: '内部错误',
                type: 'success',
            })
            break;
    }
    return res.data.data
}, err => {
    throw new Error(err)
})
// 导出http
export default http;

请求配置文件就算是写好了

第二步：

然后在src目录下创建request.js文件，在里面编写请求数据接口的方法，文件内容如下：

// 导入请求配置文件
import http from "./http";

function request({ method = 'get', url, data = {}, params = {} }) {
    return http({
        method,
        url,
        data,
        params
    })
}
//导出request
export default request;