记录一下axios，用法来源于官网

官网

https://axios-http.com/docs/api_intro
http://axios-js.com/

用法

定义myAxios

目录结构为：
plugins
|_____myAxios.js

创建实例

// Set config defaults when creating the instance
const myAxios = axios.create({
    baseURL: 'https://localhost:8080/api'
});

cookie

每次向后端发送请求时携带cookie

myAxios.defaults.withCredentials = true;

创建请求与响应拦截器

// 添加请求拦截器
myAxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log("请求拦截，",config)
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    console.log("响应拦截",response)
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

记得导入与导出

import axios from "axios";

……

export default myAxios;

使用示例

下面为页面加载时显示get请求获取到的所有user

onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags',{
    params: {
      tags: tags,
    },
    paramsSerializer: params => {
      return qs.stringify(params, { indices: false })
    }
  }).then(function (response) {
    console.log("请求tags成功",response);
    showToast('成功')
    console.log("response为：", response);
    return response.data?.data;
  }).catch(function (error){
    console.log("请求tags失败",error)
    showToast('失败')
  })
  if(userListData){
    userList.value = userListData;
  }
})

额外用法

1. 请求数据为List类型
   使用第三方库'qs'

   import qs from 'qs';

   在传递的params之下,添加paramsSerializer属性

   paramsSerializer: params => {
       return qs.stringify(params, { indices: false })
   }