Vue之Axios的异步通信详解

在Vue中，我们常常需要通过异步通信，从后端服务器获取数据以更新前端的视图。Axios是一个基于Promise的HTTP客户端库，可以方便地实现异步通信，并且可以处理跨域请求。

安装和引入

在使用Axios之前，需要先安装和引入。

安装

使用npm安装：

npm install axios --save

引入

在Vue组件中，可以通过以下方式引入Axios：

import axios from 'axios'

基本用法

下面介绍Axios的基本用法，包括发送GET请求和POST请求。

发送GET请求

使用Axios发送GET请求的语法如下：

axios.get(url[, config])
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

其中，url是请求的URL地址，config是可选的配置对象，可以设置请求的headers、参数、超时时间等。

示例代码如下：

axios.get('/api/users', {
  params: {
    id: 1,
    name: 'jack'
  }
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面代码向API的/api/users发送了一个get请求，传递了两个参数id和name。如果成功获取到数据，控制台将输出响应数据。

发送POST请求

使用Axios发送POST请求的语法如下：

axios.post(url[, data[, config]])
  .then(function (response) {
    // 处理响应数据
  })
  .catch(function (error) {
    // 处理错误
  });

其中，url是请求的URL地址，data是要发送的数据，config是可选的配置对象，可以设置请求的headers、参数、超时时间等。

示例代码如下：

axios.post('/api/users', {
  id: 1,
  name: 'jack'
})
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

上面代码向API的/api/users发送了一个post请求，传递了两个参数id和name。如果成功获取到数据，控制台将输出响应数据。

拦截器

除了基本用法外，Axios还提供了拦截器功能，可以在请求或响应被发送前、后对它们进行拦截和处理。

使用拦截器可以很方便地对请求进行统一加header、统一处理错误信息等操作。

请求拦截器

使用请求拦截器对所有请求添加共用的headers：

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = localStorage.getItem('token')
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

上面代码中，通过axios提供的拦截器机制，统一对请求添加了Authorization头部信息。在请求时，如果需要添加其他header信息，只需要在请求的配置中添加即可。

响应拦截器

使用响应拦截器对响应的数据进行统一处理：

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response.data;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

上面代码中，我们将返回的数据从响应对象中剥离出来，这样我们就可以直接在请求成功的回调函数中获取到数据。

总结

Axios是一个非常好用的发送HTTP请求的库，它不仅支持Promise，还提供了拦截器功能，让我们可以很方便地对请求进行统一加header、统一处理错误信息等操作。使用Axios可以使我们的代码更加简洁、易读。