一、在utils文件下新建request.js，對axios重新封裝

import axios from 'axios'
import { ElMessage } from 'element-plus'

const TOKEN_INVALID = 'Token認(rèn)證失敗，請重新登錄'
const NETWORK_ERROR = '網(wǎng)絡(luò)請求異常，請稍后重試'

// 創(chuàng)建axios實(shí)例
let service = axios.create({
  //   baseURL: process.env.BASE_URL || 'prod',
  baseURL: 'https://www.fastmock.site/mock/d9e148087bcae80d40622e393a3da21b/api',
  timeout: 8000
})

// request攔截器
service.interceptors.request.use(
  req => {
    const header = req.headers
    if (!header.Authorization) header.Authorization = 'test token'
    return req
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// respone攔截器
service.interceptors.response.use(
  res => {
    const { data, statusText } = res
    if (res.status === 200) {
      return data
    } else if (res.status === 40001) {
      ElMessage.error(statusText)
    }
    return Promise.reject(TOKEN_INVALID)
  },
  error => {
    ElMessage.error(error || NETWORK_ERROR)
    return Promise.reject(error || NETWORK_ERROR)
  }
)

export default service

二、實(shí)例使用

import { onMounted } from 'vue';
import service from "@/utils/request";
export default {
  name: 'Home',
  components: {
  },
  setup() {
   onMounted(() => {
      service.post('/user/login', {
        username: 'admin',
        password: '123456'
      }).then(res => {
        console.log(res)
      })
    })
    return {
    }
  }
}
</script>