Axios 安装

与 Vuex 非常相似，您可以通过多种方式将 Axios 包含在项目中。最简单的方法是粘贴指向库的内容分发网络 (CDN) 的 <script> 标记：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

另一种选择是使用节点包管理器 npm。在现有的 Vue 应用程序中，您可以按如下方式安装 Axios：

npm install axios

完成此操作后，您的 Vue 组件就可以导入该库，如下所示：

import axios from 'axios';

您如何使用 Axios 将取决于您正在交互的 API。下面是一个使用虚构 API 的简单示例：

axios.get('https://www.raymondcamden.com/api/cats')
.then(res => {
    this.cats = res.data.results;
}).catch(error => {
    console.error(error);
});

在前面的示例中，我们针对虚构的 API https://www.raymondcamden.com/api/cats 执行 GET 请求（默认为 GET）。Axios 返回 Promise，这意味着我们可以将结果和错误与 then 和 catch 链接起来。生成的 JSON（同样，这是一个虚构的 API）会自动解析，因此剩下的就是将结果分配给一个值，在本例中，是我的 Vue 应用程序中使用的名为 cats 的值。

现在让我们看一下使用 Axios 从 API 加载数据的分步过程。

练习10.01：使用Axios从API加载数据

让我们看一个使用 Axios 的复杂示例。此示例将对 Star Wars API 进行两次不同的 API 调用并返回两个信息列表。现在，我们将跳过使用 Vuex 以使此介绍更简单一些。

要访问本练习的代码文件，请参阅 https://packt.live/3kbn1x1 。

生成一个新的 Vue 应用程序，并在 CLI 完成后将 Axios 添加为 npm 依赖项：
```
npm install axios
```
打开 App.vue 页面并添加 axios 的导入：
```
import axios from 'axios';
```
打开 App.vue 页面并添加电影(films)和船舶(ships)数组的数据值：
```
data() {
    return {
        films:[],
        ships:[]
    }
},
```

打开 App.vue 并使用创建的方法从 API 加载电影(films)和星际飞船(starships)：

created() {
    axios.get('https://swapi.dev/api/films')
    .then(res => {
        this.films = res.data.results;
    }).catch(error => {
        console.error(error);
    });

    axios.get('https://swapi.dev/api/starships')
    .then(res => {
        this.ships = res.data.results;
    }).catch(error => {
        console.error(error);
    });
}

接下来，编辑模板以迭代值并显示它们：

<h2>Films</h2>
<ul>
    <li v-for="film in films" :key="film.url">
        {{ film.title }} was released in {{ film.release_date }}
    </li>
</ul>
<h2>Starships</h2>
<ul>
    <li v-for="ship in ships" :key="ship.url">
        {{ ship.name }} is a {{ ship.starship_class }}
    </li>
</ul>

错误处理是使用 catch 处理程序完成的，但仅发送到浏览器控制台。如果远程数据未加载，最好告诉用户一些信息，但就目前而言，这是可以接受的。另一个建议是处理加载状态，您将在本章后面看到一个示例。

使用以下命令启动应用程序：
```
npm run serve
```

在浏览器中打开 URL 将生成以下输出：

Figure 1. Figure 10.1: Results of the API calls rendered in the browser

这个简单的示例展示了将 Axios 添加到 Vue 应用程序是多么容易。请记住，Vue 不需要 Axios，欢迎您使用任何您想要的库，或者只需使用浏览器的本机 Fetch API。

现在您已经了解了如何将 Axios 引入项目，让我们看看其中一个更酷的功能 Axios：指定默认值。