Vue怎么封装Axios的get、post请求

在现代的前端开发中，Axios是一个非常流行的HTTP客户端库，用于发送异步请求。在Vue项目中，我们通常需要对Axios进行封装，以便更好地管理API请求、统一处理错误、添加拦截器等。本文将介绍如何在Vue项目中封装Axios的get和post请求。

1. 安装Axios

首先，我们需要在Vue项目中安装Axios。如果你还没有安装Axios，可以通过以下命令进行安装：

npm install axios

或者使用yarn：

yarn add axios

2. 创建Axios实例

为了更好地管理Axios请求，我们可以创建一个Axios实例，并在实例上配置一些默认选项，比如基础URL、超时时间、请求头等。

// src/utils/request.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;

3. 封装get请求

接下来，我们可以封装一个get请求方法。这个方法将接收请求的URL和参数，并返回一个Promise对象。

// src/utils/request.js
export const get = (url, params) => {
  return instance.get(url, { params })
    .then(response => {
      return response.data;
    })
    .catch(error => {
      throw error;
    });
};

在这个封装中，我们使用了instance.get方法来发送GET请求，并将请求参数传递给params。如果请求成功，我们返回response.data；如果请求失败，我们抛出错误。

4. 封装post请求

类似地，我们可以封装一个post请求方法。这个方法将接收请求的URL和数据，并返回一个Promise对象。

// src/utils/request.js
export const post = (url, data) => {
  return instance.post(url, data)
    .then(response => {
      return response.data;
    })
    .catch(error => {
      throw error;
    });
};

在这个封装中，我们使用了instance.post方法来发送POST请求，并将请求数据传递给data。如果请求成功，我们返回response.data；如果请求失败，我们抛出错误。

5. 使用封装的请求方法

现在，我们可以在Vue组件中使用封装的get和post请求方法了。

// src/components/ExampleComponent.vue
import { get, post } from '@/utils/request';

export default {
  methods: {
    fetchData() {
      get('/api/data', { id: 1 })
        .then(data => {
          console.log('Data fetched:', data);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    submitData() {
      post('/api/submit', { name: 'John', age: 30 })
        .then(response => {
          console.log('Data submitted:', response);
        })
        .catch(error => {
          console.error('Error submitting data:', error);
        });
    },
  },
};

在这个例子中，我们分别调用了get和post方法来获取数据和提交数据。如果请求成功，我们会在控制台中打印出返回的数据；如果请求失败，我们会打印出错误信息。

6. 添加请求拦截器和响应拦截器

为了进一步优化我们的请求处理，我们可以添加请求拦截器和响应拦截器。请求拦截器可以在请求发送之前对请求进行一些处理，比如添加认证信息；响应拦截器可以在响应返回之后对响应进行一些处理，比如统一处理错误。

// src/utils/request.js
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.status === 401) {
      // 处理未授权错误
      console.error('Unauthorized, please login again.');
    }
    return Promise.reject(error);
  }
);

在这个例子中，我们在请求拦截器中添加了认证信息，并在响应拦截器中处理了未授权错误。

7. 总结

通过封装Axios的get和post请求，我们可以更好地管理API请求，统一处理错误，并添加拦截器来优化请求和响应的处理。这种封装方式不仅提高了代码的可维护性，还使得我们在开发过程中能够更加专注于业务逻辑的实现。

希望本文对你有所帮助，祝你在Vue项目中愉快地使用Axios！