Vue 中 axios 发送异步请求方法全解析

在 Vue 开发中，axios 是常用的发送异步请求的工具，它基于 Promise 实现，支持多种请求方式，极大地提升了数据交互的效率。下面我们就来全面解析 Vue 中 axios 发送异步请求的方法。

基本使用

要在 Vue 项目中使用 axios，需先安装它。可以通过 npm 或 yarn 进行安装：npm install axios 或 yarn add axios。安装完成后，在组件中引入：import axios from 'axios';。

发送 GET 请求获取数据非常简单：

axios.get('https://example.com/api/data')
.then(response => {
    console.log(response.data);
  })
.catch(error => {
    console.error('请求出错:', error);
  });

发送 POST 请求用于提交数据，示例如下：

axios.post('https://example.com/api/data', {
  key: 'value'
})
.then(response => {
    console.log(response.data);
  })
.catch(error => {
    console.error('请求出错:', error);
  });

全局配置

为了方便管理请求配置，可以进行全局配置。在 main.js 中：

import axios from 'axios';
axios.defaults.baseURL = 'https://example.com/api';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
Vue.prototype.$axios = axios;

这样在组件中使用 this.$axios 就可以发送请求，并且会自动带上配置的基础 URL 和请求头。

拦截器

axios 提供了拦截器功能，可在请求发送前和响应接收后进行一些处理。例如添加加载动画、统一处理错误等。 请求拦截器：

axios.interceptors.request.use(config => {
  // 显示加载动画
  return config;
}, error => {
  return Promise.reject(error);
});

响应拦截器：

axios.interceptors.response.use(response => {
  // 隐藏加载动画
  return response;
}, error => {
  // 统一处理错误
  return Promise.reject(error);
});

并发请求

当需要同时发送多个请求时，可以使用 axios 的并发请求功能。

const request1 = axios.get('https://example.com/api/data1');
const request2 = axios.get('https://example.com/api/data2');
axios.all([request1, request2])
.then(axios.spread((response1, response2) => {
    console.log(response1.data, response2.data);
  }))
.catch(error => {
    console.error('请求出错:', error);
  });

掌握以上这些 axios 在 Vue 中的异步请求方法，能够更高效地进行前后端数据交互，提升项目开发的质量和效率。