vue2的axios二次封装

程序猿_“大神”

已于 2022-11-15 19:27:41 修改

阅读量587

点赞数 4

文章标签： javascript 前端 vue.js

于 2022-11-15 19:10:44 首次发布

本文链接：https://blog.csdn.net/dyx001007/article/details/127871703

版权

本文档介绍了如何在Vue2项目中进行Axios的二次封装。首先在src目录下创建一个http文件夹，然后在其中创建request.js和api.js两个文件，用于组织和管理HTTP请求。

摘要由CSDN通过智能技术生成

在src下创建一个http文件夹，在http文件夹创建request.js文件

//封装axios
import axios from "axios";
import { Message, Loading } from 'element-ui';
import router from "../router"
// 封装loading开启和结束函数
let loading;
function startLoading(){
  loading = Loading.service({
    lock:true,
    text:'拼命加载中...',
    background:'rgba(0,0,0,0.7)'
  })
}
function endLoading(){
  loading.close()
}

//1: 创建axios实例
const service = axios.create({
  //基地址
  baseURL:"",
  //baseURL:env.dev.baseUrl,
  settimeout: 5000,
});
//2:请求拦截
service.interceptors.request
  .use((config) => {
    //在发送请求之前做些什么，比如验证token之类的
    if(localStorage.eleToken){
      config.headers.Authorization = localStorage.eleToken
    }
    //开启loading
    startLoading();
    return config;
  },(error) => {
    //对错误请求做些什么
    //关闭loading
    endLoading();
    return Promise.reject(error)
  })

//3:响应拦截
service.interceptors.re