axios全局封装（vue3 element-plus）

前言：axios在前端项目中是常用的http请求封装库，基于promise写法，让我们能更好的做异步处理。这里的代码主要借鉴了网上的代码，进行更改成自己的代码。

1.项目中下载axios

这里注意要进项目根目录噢，package.json在的地方。使用npm/pnpm/yarm进行下载。

npm install axios

2.配置全局axios请求文件

创建一个request.js，文件中进行一些axios的配置，如添加请求前缀、超时时间、请求前/请求后的拦截器等。

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
//默认超时时间
axios.defaults.timeout = 50000;

//统一请求前缀
axios.defaults.baseURL ='/api'

// 请求拦截器
axios.interceptors.request.use(
  config => {
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    config.headers['token'] = localStorage.getItem('token')
    if(config.method.toUpperCase() === 'POST') {
      config.headers['Content-Type'] = 'application/json;charset=utf-8'
    }
    return config
  },
  error => {
    return Promise.error(error)
  })

// 返回拦截器
axios.interceptors.response.use(
    res => {
        console.log(res)
        const back_data = res.data
        //未登录
        if (back_data?.code === 20000){
            router.push('/login')
        }else {  
            ElMessage({
                message: back_data.msg || res.message  ,
                type: 'error',
            })
        }
        return Promise.resolve(res);
    }, 
    error => {
        switch (error.status || error.response.status) {
        case 500: 
            
            ElMessage({
                message: 'sorry,Server Error.',
                type: 'error',
            })
            break
        case 404:
            ElMessage({
                message: '404,api Not Find!',
                type: 'error',
            })
            break
        case 400:
            ElMessage({
                message: 'sorry, 400!',
                type: 'error',
            })
            break
        // 其他错误，直接抛出错误提示
        default:
            ElMessage({
                message: error.message || error.msg,
                type: 'error',
            })
        }
        return Promise.reject(error);
    }
);

function f_base_get (url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params)
        .then(res => {
            resolve(res.data)
        })
        .catch(err => {
            reject(err)
        })
    })
}

function f_base_post(url, params){
    return new Promise((resolve, reject) => {
      axios.post(url, params)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
}

//  将Promise 的错误统一捕获
export async function post (url, params) {
    let back = null
    try{
        back = await f_base_post(url, params)
    }catch(e){
        if (e?.response.data === 'The CSRF token is missing.'){
            console.log('CSRF token miss, try again')
            back = await post(url, params)
        }
        // console.log('async post', e)

    }
    return back
}

export async function get(url, params) {
    let back = null
    try{
        back = await f_base_get(url, params)
    }catch(e){
    }
    return back
}

3.创建一个管理api的文件。

写一个统一管理的api文件，api很多可以根据具体请求分类多个管理文件。

import {get, post} from './request'


//登录
export const login = data => post('/login', data)

4.使用api

import { login } from '/api/api.js'


const loginHandle = (formData)=>{
	login(formData).then(res=>{
		//do something...
	})
}

5.怎么请求到后端

一、开发环境中
配置vue.config.js反向代理。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  },
  //反向代理
  // 1、这里配置了跨域及代理只针对开发环境生效
  // 2、不建议你在前端配置跨域，建议你后端配置Allow-Origin,Method,Headers，放行token字段，一步到位
  // 3、后端配置了跨域，就不需要前端再配置，会发生Origin冲突
  // 4、webpack5版本前端配置代理无法与mock同时使用，如果一定要用前端代理，需注释setupMiddlewares: require('./mock')
  devServer:{
    // setupMiddlewares: require('./mock'),
    proxy:{
      "/api":{
        target:"http://localhost:8888"
      }
    }
  }
  
})

二、线上环境
配置nginx的反向代理,根据具体需求来配置。

location /api/ {

  proxy_pass: https://mykindle.top:8888;
}