如何在 Vue 中使用 Axios 异步请求API

下面我来详细讲解一下如何在 Vue 中使用 Axios 异步请求 API 的完整攻略。

1. 安装 Axios

在使用 Axios 之前，我们需要先安装它。可以通过 npm 安装：

npm install axios --save

或者通过 yarn 安装：

yarn add axios

2. 在 Vue 中使用 Axios

在 Vue 中使用 Axios 也很简单，只需要直接在组件中引入 Axios，并调用其中的方法即可。示例代码如下：

<template>
  <div>
    <p v-if="error">获取数据失败，请稍后重试...</p>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      error: false,
    };
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        this.list = response.data;
      })
      .catch(() => {
        this.error = true;
      });
  },
};
</script>

在上面的代码中，我们先在 <script> 中引入了 Axios，并使用 axios.get 方法异步请求了一个 API。请求成功后将响应数据赋值给了 list 属性，如果请求失败则将 error 置为 true，最终渲染到模板中。

3. 使用 Axios 的全局配置

除了直接调用 Axios 方法外，我们还可以对 Axios 进行全局配置，例如设置默认的请求头、请求超时时间等。示例代码如下：

import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 5000;

axios.get('/posts/1')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

在上面的代码中，我们通过 axios.defaults 对 Axios 进行全局配置，例如设置基础 URL、请求头和超时时间。然后我们通过 axios.get 方法发起了一个 GET 请求，并打印了响应数据或错误信息。

4. 使用 Axios 的实例配置

除了全局配置外，我们还可以通过创建 Axios 实例来进行个性化配置，例如设置不同的基础 URL 和超时时间等。示例代码如下：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

instance.get('/posts/1')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });

在上面的代码中，我们通过 axios.create 方法创建了一个 Axios 实例，并进行了个性化配置，然后我们通过该实例的 get 方法发起了一个 GET 请求，并打印了响应数据或错误信息。

以上就是完整的在 Vue 中使用 Axios 异步请求 API 的攻略，希望对您有所帮助。