在 Axios 中使用默认值

虽然 Exercise 10.01 “使用 Axios 从 API 加载数据” 中的代码运行良好，但让我们考虑一个稍微更高级的示例。 Axios 的功能之一是能够设置在将来的调用中使用的默认值。如果您查看前面代码中的两个调用，您会发现它们是相似的。您可以更新创建的方法来利用它：

created() {
    const api = axios.create({
        baseURL:'https://swapi.dev/api/',
        transformResponse(data) {
            data = JSON.parse(data);
            return data.results;
        }
    });

    api.get('films')
    .then(res => this.films = res.data);

    api.get('starships')
    .then(res => this.ships = res.data);
}

在这个更新版本中，我们切换到 Axios 实例。指定默认的 baseURL 值可以节省稍后的键入时间。接下来，transformResponse 功能用于转换响应。这使我们可以在将数据发送到稍后调用的处理程序之前修改数据。由于所有 API 调用都会返回一个结果值，并且这是我们唯一关心的事情，因此我们通过返回该结果值而不是结果的其余部分来稍微简化一下事情。请注意，如果您想构建一组复杂的转换，Axios 允许您在 TransformResponse 中使用一组函数。

在下一节中，我们将学习如何将 Axios 与 Vuex 结合使用。