在 Vue.js 中使用 Axios 使用 Rest API

Axios 是一个基于 Promise 的 HTTP 客户端，可以让你更方便地发送 XMLHttpRequests 从而处理 RESTful API 请求。

本文将介绍如何在 Vue.js 中使用 Axios 来处理 RESTful API 请求。

安装 Axios

可以通过 npm 安装 Axios。在命令行中执行以下命令：

npm install axios --save

这将安装最新版本的 Axios，并将其添加到你项目的依赖项中。

在 Vue.js 中使用 Axios

要在 Vue.js 中使用 Axios，我们需要在 Vue 组件中导入 Axios。可以在单个 Vue 组件中导入，也可以在整个应用程序的主文件中导入。在这里，我们将在单个 Vue 组件中导入。

1. 首先，需要在 Vue 组件中导入 Axios。

import axios from 'axios';

然后，可以使用 Axios 发送 GET 请求获取数据。

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
});

这里我们使用了 URL：https://jsonplaceholder.typicode.com/posts 来获取数据，并在控制台中打印数据。

2. 接下来，可以使用 Axios 发送 POST 请求创建数据。

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
});

这里我们将数据传递给 URL：https://jsonplaceholder.typicode.com/posts 来创建新的数据，并在控制台中打印数据。

3. 最后，可以使用 Axios 发送 DELETE 请求删除数据。

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
});

这里我们使用 URL：https://jsonplaceholder.typicode.com/posts/1 删除数据，并在控制台中打印数据。

响应拦截器

在使用 Axios 时，我们可以使用 Axios 的拦截器来拦截请求和响应。在这里，我们将使用响应拦截器来全局处理请求返回的错误信息。

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response && error.response.data) {
      return Promise.reject(error.response.data);
    }
    return Promise.reject(error.message);
  }
);

这里我们创建了响应拦截器，如果请求返回的响应中包含错误信息，则将其打印在控制台中。

总结

Axios 是一个方便且功能强大的 HTTP 客户端，在 Vue.js 中使用它可以更方便地处理 RESTful API 请求。我们可以使用它来发送 GET、POST 和 DELETE 请求。可以使用拦截器来全局处理请求错误。