Vue二次封装axios请求拦截器，响应拦截器

个人网站:【紫陌】【笔记分享网】
想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

二次封装axios

目录

src
├── api
     ├── index.js 	（api接口同一管理）
     ├── request.js (axios二次封装)

配置环境

index.js

首先安装axios，引入axios，然后创建axios实例进行配置。这些配置我们可以不用记住看这个文档CV下来,二次封装axios无非就是添加请求拦截器和响应拦截器
文档地址 : axios

//对于axios进行二次封装
import axios from "axios";

//利用axios对象方法create  去创建一个axios实例
const requests = axios.create({
    //基础路径
    baseURL:"/api",
    //代表请求的超时的时间5S
    timeout:"5000",
    
})

//添加请求拦截器
requests.interceptors.request.use(function (config) {
    //config:配置对象，对象了里边有一个很重要的属性，headers请求头
    return config
})

// 添加响应拦截器
requests.interceptors.request.use((res)=>{
    //成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res
},(err)=>{
    //响应失败的回调函数
    return Promise.reject(err)
})

//对外暴露
export default requests

api.js

该文件首先要引入刚刚封装好的request(axios) r然后把所有接口暴露出去。

//api接口同一管理
import requests from "./request";

//注册接口
//   /reguser    请求方式：POST
export const reqRegister = (data) =>requests({ url: "/reguser", method: "POST", data});

// 登录接口
// /login   请求方式 ： POST
export const reqLogin = (data) =>requests({ url:"/login", method:"post",data})