关于Vue项目中对axios进行二次封装

原创

已于 2022-07-19 19:32:55 修改 · 553 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-17 14:11:12 首次发布

本文介绍了如何使用axios创建一个封装的函数，实现复用请求地址、自动携带公共参数、并统一处理错误和响应数据。通过实例展示了如何设置请求拦截器和响应拦截器，以及在登录API中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

封装axios函数功能：

1、复用请求地址：公共请求地址就不用重复定义。

2、自动携带公共的请求参数。

3、函数调用返回的promise对象内部的结果值

如果是成功对象，直接得到data数据

如果是失败状态，直接得到失败原因

项目中常用场景：可以统一处理错误请求，请求头自动携带token、处理返回的响应数据、设置进度条等，代码如下：

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import getUserTempId from "./getUserTempId";
import store from "@/store";

// axios.create方法的返回值，简单理解axios的实例，功能和axios基本一致
const request = axios.create({
  // 请求基础路径，所有通过request发送请求，请求地址前面都会自动加上baseURL
  baseURL: "/api",
  // 请求的超时时间，超过时间请求会自动中断，请求失败
  timeout: 20000,
  // 公共请求头(固定写死)
  // headers: {},
});

/*
  请求拦截器: 在发送请求之前触发的函数
  响应拦截器：在响应回来的时候触发的函数

  触发流程：
   request({ method: 'xx', url: 'xxx' })
    .then()
    .catch()

    请求拦截器的回调
      一般只会触发成功的回调
    发送请求
    响应拦截器的回调
      看响应状态码
        2xx触发成功的回调函数
        非2xx触发失败的回调函数