vue 3.0 axios 封裝過程

1、搭建好vue框架，引入axios

2、until文件下創建request.js

baseURL 配置有時候會產生跨域問題，直接在根目錄下的vue.config.js中配置代理可以解決

import axios from 'axios'

// 創建axios
const service = axios.create({
  baseURL: '你的請求前綴/api'
});

// 添加請求攔截器
service.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  return config;
}, function (error) {
  // 對請求錯誤做些什么
  return Promise.reject(error);
});

// 添加響應攔截器
service.interceptors.response.use(function (response) {
  // 對響應數據做點什么
  console.log('res',response);
  return response;
}, function (error) {
  // 對響應錯誤做點什么
  return Promise.reject(error);
});

export default service;

3、新建api.js文件 筆者這里在until文件下創建這個文件

import service from "../until/request"

// 獲取seller
export function getSeller(){
  return service.request({
    method:'get',
    url:'/seller',
  })
}

4、調用
筆者沒有將api掛載到vue全局文件上 因為每個都是單獨導出，在單個組件中直接按需導入組件

...
import {getSeller} from '../until/api'
...

async getData(){
      const {data:res} = await getSeller()
      this.allData = res
      // 數據從小到大排序
      this.allData.sort((a,b)=>{
        return a.value - b.value
      })
    },