Vue axios 异步请求，请求响应拦截器

在 Vue.js 中使用 axios 进行网络请求是非常常见的做法，因为它提供了比原生的 Fetch API 更丰富的功能，并且更易于处理错误和配置。结合 Axios 的拦截器功能，你可以对所有的请求或响应进行预处理，比如添加认证头信息、统一处理错误等。以下是关于如何在 Vue 中使用 Axios 发起异步请求以及设置请求和响应拦截器的详细指南。

安装 Axios

首先，确保你已经安装了 Axios。如果还没有安装，可以通过 npm 或 yarn 来安装：

npm install axios
# 或者
yarn add axios

创建 Axios 实例

为了更好地管理和配置 Axios 请求，建议创建一个自定义的 Axios 实例。这样可以为所有请求设置默认配置（如基础 URL、超时时间等），并集中管理拦截器。

// src/api/axiosInstance.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的API地址
  timeout: 5000, // 请求超时时间 (毫秒)
});

export default instance;

配置请求拦截器

请求拦截器允许你在请求发送之前对其进行修改，例如添加认证令牌、更改请求体格式等。

// 在上面的文件中继续添加
instance.interceptors.request.use(
  config => {
    // 你可以在这里做任何事情，比如：
    const token = localStorage.getItem('authToken');
    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 范围内
      switch (error.response.status) {
        case 401:
          // 例如：重定向到登录页面
          router.push('/login');
          break;
        case 403:
          console.error('Access denied');
          break;
        case 404:
          console.error('Resource not found');
          break;
        case 500:
          console.error('Internal server error');
          break;
        default:
          console.error('Something went wrong');
      }
    } else {
      // 某种情况导致请求被取消，或者没有设置响应
      console.error('Request failed:', error.message);
    }
    return Promise.reject(error);
  }
);

使用 Axios 发起请求

现在你可以在组件或其他地方使用这个 Axios 实例来发起请求。下面是一个简单的例子，展示了如何在 Vue 组件中使用 Axios 获取数据。

<template>
  <div>
    <ul v-if="items.length">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import axiosInstance from '@/api/axiosInstance'; // 引入自定义的 Axios 实例

export default {
  data() {
    return {
      items: [],
    };
  },
  async created() {
    try {
      const response = await axiosInstance.get('/data'); // 假设有一个 /data 端点返回数据
      this.items = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};
</script>

封装 API 请求

为了保持代码整洁并且易于维护，最好将特定的 API 请求封装成独立的服务函数。这样不仅可以让业务逻辑更加清晰，也可以方便地在整个应用中复用这些服务。

// src/api/services.js
import axiosInstance from './axiosInstance';

export const fetchItems = async () => {
  const response = await axiosInstance.get('/data');
  return response.data;
};

export const addItem = async newItem => {
  const response = await axiosInstance.post('/data', newItem);
  return response.data;
};

// 然后在组件中调用这些服务函数
import { fetchItems } from '@/api/services';

export default {
  async created() {
    try {
      this.items = await fetchItems();
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  },
};

通过这种方式，你可以轻松地在 Vue 应用程序中集成 Axios 并利用其强大的功能来进行高效的 HTTP 请求。记得根据自己的项目需求调整配置和逻辑，以确保最佳性能和用户体验。