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
      })
    },