vue3 axios请求封装，全局使用_vue3封装axios后全局使用-CSDN博客

下载axios ,新建config/index.js存放域名，新建request.js写请求响应、拦截信息，api.js请求地址管理，main.js中provide全局设置变量，a.vue中inject引入使用接口api。

新建config文件夹，创建index.js

const config = {
  REQUEST_URL: "https://xxxxx"8080/",
  IMG_URL: "https://xxxx", 
};

export default config;

request.js,引入域名信息，设置请求头信息

import config from "./config";
import axios from 'axios'
const request={}

const instance=axios.create({
    baseURL:config.REQUEST_URL,
    timeout:60000//一分钟请求
})
// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers = config.headers ||{
    'Content-Type':'application/json' //配置请求头
  }
  return config
}, error => {
  Promise.reject(error)
})
 
// 响应拦截
instance.interceptors.response.use(response => {
    const resCode = response.status;
    if (resCode === 200) {
      return  Promise.resolve(response);
    } else {
      return  Promise.reject(response);
    }
    // return response;
  }, error => {
    console.log(error)
    const resCode = error.response.status;
    switch (resCode) {
      case 401:
        
        // alert('401,请求失败，请联系管理员')
        break;
      case 404:
        // alert('404,网络请求不存在')
        break;
      case 500:
        // alert('500,服务器连接错误')
      
        break;
      // 其他状态码错误提示
      default:
        // alert(resCode,',请求失败，请联系管理员')
    }
    return Promise.reject(error);
  })

request.requestData=(wey, url,params)=>{
  return new Promise((resolve,reject)=>{
      instance[wey](url,params).then(res=>{
          resolve(res.data)
      }).catch(err=>{
          reject(err)
      })
  })    
}

let requestData=request.requestData
export  {requestData};
export default request

api.js,引入封装的请求，我这里只用了requestData函数，request 对象的使用可以自己写

import request from "./request";
import {requestData} from './request'
const api={}

// 获取index数据
api.getLeftList = params =>requestData('get',`client/get-creation-list-api/`, params)

export default api

全局设置定义，main.js中设置

import  api from './api.js'
app.provide('$api',api);

a.vue按需使用

import { inject} from "vue";
let api=inject('$api')
console.log('api',api)
//使用接口，testParams参数根据实际需求传，可省略
api.getLeftList({testParams:'11'}).then(res=>{
    console.log(res)
})