跳至主要內容
axios 封装

axios 封装

1、在根目录中创建 utils 文件,并且在 utils 中创建 axios.js 文件

import axios from "axios";
import router from "../router";
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: ({}).VITE_BASE_URL,//此处可直接填写接口域名,我是采用从环境变量中读取,方便打包区分
  timeout: 50000,//超时响应时间
  headers: {//请求头
    "Content-Type": "application/json",
    "token": localStorage.getItem("token") || "",
  },
})

//请求拦截 请求之前做的事情
service.interceptors.request.use(
  function (config: any) {
    if (config.headers) {
      config.headers["token"] = localStorage.getItem("token") || "";
    }
    return config;
  },
  function (error: any) {
    console.log(error);
    return Promise.reject(error);
  }
)

//响应拦截  请求之后的处理,一般用来处理请求的状态码问题,例;500、200、404、502
service.interceptors.response.use(
  function (res: any) {
    return new Promise((resolve, reject) => {
      switch (res.data.code) {
        case 200:
          return resolve(res.data);
        case 500:
          ElMessage.error(res.data.msg)
          reject(res.data);
          break;
        case 355:
          localStorage.clear();
          router.push("/login");
          break;
      }
    });
  },
  function (error: any) {
    return Promise.reject(error);
  }
);

export default service;


周浚豪...大约 1 分钟axiosaxios
01、技术选型

01、技术选型

1、前序

此教程致力于帮助小白独立开发后台项目的简单教程,可能有人会说现在网上很多免费的开源框架干嘛还要自己费劲巴拉的去搭建后台。
我是这样想的,现在确实有很多优秀的开源框架,但是那是作者一点一点搭建的,后台的每个功能每个步骤只有作者自己是了然于胸,我们去使用也仅仅是使用,但是前端一行,仅仅会用别人的东西,那是不够的,必须要自己会看,会懂,会写,才能应对工作中的突发情况,如果领导提出一个新需求,然而你所使用的开源框架没有,这时你要怎么办,或者领导让你对某一款开源框架进行二开你又当如何,所以还是需要自己会搭建一个属于自己的后台模板。


周浚豪...大约 1 分钟axiosaxios