vue3中的axios使用js封装

在Vue3中，我们可以使用axios库方便地处理HTTP请求。由于官方推荐通过setup函数来组织组件的结构，这里我们通常会创建一个单独的文件（比如`api.js`），将axios实例化并暴露出来供组件使用。以下是一个简单的封装示例：

// api.js
import axios from 'axios';
import { defineAsyncComponent } from '@vue/composition-api';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_URL, // API 的基础 URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    Authorization: localStorage.getItem('token') || '',
  },
});

service.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  return config;
}, (error) => {
  // 对请求错误做些什么
  console.error(error);
  Promise.reject(error);
});

service.interceptors.response.use((response) => {
  // 如果响应成功，返回数据
  return response.data;
}, (error) => {
  // 对响应错误做些什么
  console.error(error.response.data);
  if (error.response.status === 401) {
    // 如果是未授权错误，可以清除token或重定向到登录页面
    localStorage.removeItem('token');
    router.push('/login');
  }
  return Promise.reject(error);
});

export default {
  install(app) {
    app.config.globalProperties.$axios = service;
  },
  asyncRequest: async (method, url, data) => {
    const response = await service({ method, url, data });
    return response;
  },
};

在组件中，你可以像下面这样使用这个封装的axios：

<!-- components/Login.vue -->
<template>
  <button @click="login">Login</button>
</template>

<script setup>
import { onMounted, ref, callAsyncMethod } from 'vue';
import { $axios, asyncRequest } from '@/api/api.js';

const username = ref('');
const password = ref('');

async function login() {
  try {
    const response = await asyncRequest('post', '/auth/login', {
      username: username.value,
      password: password.value,
    });
    console.log(response); // 使用响应数据
  } catch (error) {
    console.error(error);
  }
}
</script>