VUE3封装axios

安装 Axios

首先，你需要安装axios，可以通过npm或yarn来安装：

Bash
深色版本
npm install axios

或者

Bash
深色版本
yarn add axios

创建 Axios 实例

在你的项目中创建一个文件夹，比如叫做api，然后在这个文件夹下创建一个文件，例如index.js或axiosInstance.js，用来创建一个自定义的axios实例。

Javascript
深色版本
// api/axiosInstance.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // API 的基础 URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
    // 可以在这里添加其他默认头信息
  },
});

export default instance;

添加请求和响应拦截器

你可以在创建的axios实例上添加请求和响应拦截器，以便处理请求发送前和接收响应后的操作，如添加认证头、处理错误等。

Javascript
深色版本
// api/axiosInstance.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' },
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 请求已发出，但是不在2xx范围内
      console.error('Error:', error.response.data);
      console.error('Status:', error.response.status);
    } else {
      // 发生在设置请求时或请求被取消时的错误
      console.error('Error:', error.message);
    }
    return Promise.reject(error);
  }
);

export default instance;

创建 API 方法

接下来，你可以为不同的API端点创建方法。这些方法可以放在同一个文件中，或者为了更好的组织，每个功能模块可以单独创建一个文件。

Javascript
深色版本
// api/user.js
import instance from './axiosInstance';

export function getUser(id) {
  return instance.get(`/users/${id}`);
}

export function createUser(user) {
  return instance.post('/users', user);
}

export function updateUser(id, user) {
  return instance.put(`/users/${id}`, user);
}

export function deleteUser(id) {
  return instance.delete(`/users/${id}`);
}

在 Vue 组件中使用

最后，在你的Vue组件中导入并使用这些API方法。

Vue
深色版本
<template>
  <div>
    <!-- 使用数据 -->
  </div>
</template>

<script>
import { onMounted } from 'vue';
import { getUser } from '@/api/user';

export default {
  name: 'UserDetail',
  setup() {
    onMounted(async () => {
      try {
        const response = await getUser(1);
        console.log(response.data);
      } catch (error) {
        console.error('Failed to fetch user:', error);
      }
    });

    return {};
  },
};
</script>

以上就是如何在Vue 3中封装和使用axios的基本流程。通过这种方式，你可以轻松地管理和扩展API调用，同时保持代码的整洁和高效。