axios二次封装

为什么二次封装？

请求拦截器，响应拦截器，请求拦截器，可以再请求发送之前处理一些业务。响应拦截器，当服务器数据返回后，可以处理一些

import axios from "axios"
export default axios;
const request = axios.create({
    // 基础路径
    baseURL: "/api",
    timeout: 5000
})
// 请求拦截器，在发送请求直接，请求拦截器可以检测到，可以再请求发送之前做一些事情
request.interceptors.request.use((config) => {
    return config;
})
// 响应拦截器
request.interceptors.response.use((res) => {
    return res.data;
}, (error) => {
    return Promise.reject(new Error("false"));
})

发送请求

import requests from './request'
export const reqCategoryList = () => {
    return requests({
        url: "api/product/getBaseCategoryList",
        method: 'get'
    })
}

解决跨域问题：
vue.config.js文件中配置代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    proxy: {
      "api": {
        target: "http://39.98.123.211",
      }
    }
  }
})

案例比如要使用进度条，在请求之前开始，请求成功后停止

import axios from "axios"
export default axios;
import nprogress from "nprogress";
import "nprogress/nprogress.css"
const request = axios.create({
    // 基础路径
    baseURL: "/api",
    timeout: 5000
})
// 请求拦截器，在发送请求直接，请求拦截器可以检测到，可以再请求发送之前做一些事情
request.interceptors.request.use((config) => {
    // 进度条开始动
    nprogress.start()
    return config;
})
// 响应拦截器
request.interceptors.response.use((res) => {
	// 请求返回成功，进度条结束
    nprogress.done()
    return res.data;
}, (error) => {
    return Promise.reject(new Error("false"));
})

总结一下，二次封装后可以再请求发送前和请求发送后做一些处理不如过滤，或者执行一些业务逻辑。