axios封装

封装axios库以实现统一处理HTTP请求，通常会创建一个单独的文件来集中管理网络请求相关的配置、拦截器和方法。

安装

npm install axios

基本封装示例

// 在src/utils或src/http目录下创建一个名为axios.js（或者request.js）的文件

import axios from 'axios';
import { ref } from 'vue';

// 创建axios实例并设置基础URL和默认配置
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || 'https://api.example.com', // 设置API的基本URL
  timeout: 5000, // 请求超时时间
});

// 请求拦截器：添加请求头等通用逻辑
instance.interceptors.request.use(
  (config) => {
    // 比如从存储中获取token，并添加到headers
    const token = localStorage.getItem('userToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error),
);

// 响应拦截器：处理错误码、统一格式化数据等
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行预处理
    if (response.data && response.data.code === 200) {
      return response.data.data;
    } else {
      throw new Error(response.data.message || '服务器响应异常');
    }
  },
  (error) => {
    console.error('请求失败:', error);
    // 可以在此处全局处理错误，比如显示提示信息
    ref.error(error.message); // 假设有一个全局错误提示的状态ref
    return Promise.reject(error);
  },
);

// 封装GET请求
export const get = (url, params = {}) => instance.get(url, { params });

// 封装POST请求
export const post = (url, data = {}) => instance.post(url, data);

// 其他HTTP方法也可以按照类似方式封装，例如put、delete等

使用示例

在main.js或应用初始化的地方引入这个封装好的模块

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { get, post } from './utils/axios'; // 引入封装好的axios方法

const app = createApp(App);

app.config.globalProperties.$http = {
  get,
  post,
};

app.use(router).mount('#app');

或者在需要使用的地方，直接调用封装好的方法即可

// MyComponent.vue
<script setup>
import { ref } from 'vue';
import { get } from '@/utils/axios';

const users = ref([]);

async function fetchUsers() {
  try {
    const response = await get('/users');
    users.value = response;
  } catch (error) {
    console.error('获取用户列表出错：', error);
  }
}
</script>