如何实现 axios getJSON
简介
在前端开发中，我们经常需要通过网络请求获取服务器端的数据。axios 是一个常用的 JavaScript 库，它可以帮助我们进行网络请求。其中，axios 的 getJSON 方法可以用于发送 GET 请求并获取服务器返回的 JSON 数据。本文将向刚入行的小白介绍如何使用 axios 的 getJSON 方法。
整体流程
使用 axios 的 getJSON 方法实现 GET 请求并获取 JSON 数据的整个流程如下：
pie
title axios getJSON 流程
"创建 Axios 实例" : 1
"发送 GET 请求" : 2
"处理返回的 JSON 数据" : 3
步骤详解
创建 Axios 实例
在使用 axios 进行请求之前，我们需要先创建一个 Axios 实例。Axios 实例是一个可配置的对象，我们可以在创建实例时设置一些默认参数，例如请求的基础 URL、请求头等等。创建 Axios 实例的代码如下：
// 创建 Axios 实例
const axiosInstance = axios.create({
baseURL: ' // 设置请求的基础 URL
timeout: 5000, // 设置请求的超时时间
});
发送 GET 请求
创建了 Axios 实例之后，我们就可以使用该实例发送 GET 请求了。对于 GET 请求，我们需要指定请求的 URL 和一些可选的配置参数。发送 GET 请求的代码如下：
// 发送 GET 请求
axiosInstance.get('/data', {
params: {
id: 123,
name: 'John',
},
})
在上述代码中，我们使用了 Axios 实例的 get 方法发送 GET 请求。其中，/data 是请求的 URL，params 是一个对象，用于指定请求的查询参数。在这个例子中，我们指定了两个查询参数 id 和 name。
处理返回的 JSON 数据
发送完 GET 请求后，我们需要处理服务器返回的 JSON 数据。在 axios 中，我们可以通过 then 方法链式调用来处理返回的结果。代码如下：
// 处理返回的 JSON 数据
axiosInstance.get('/data')
.then(response => {
const data = response.data; // 获取返回的 JSON 数据
console.log(data); // 在控制台输出 JSON 数据
})
在上述代码中，我们使用 then 方法来处理服务器返回的数据。在这个例子中，我们将返回的 JSON 数据保存在 data 变量中，并使用 console.log 方法在控制台输出该数据。
完整代码示例
下面是一个完整的示例代码，展示了如何使用 axios 的 getJSON 方法发送 GET 请求并获取 JSON 数据：
// 引入 axios 库
const axios = require('axios');
// 创建 Axios 实例
const axiosInstance = axios.create({
baseURL: '
timeout: 5000,
});
// 发送 GET 请求
axiosInstance.get('/data', {
params: {
id: 123,
name: 'John',
},
})
.then(response => {
const data = response.data;
console.log(data);
})
.catch(error => {
console.error(error);
});
总结
本文介绍了如何使用 axios 的 getJSON 方法发送 GET 请求并获取服务器返回的 JSON 数据。首先，我们需要创建一个 Axios 实例，并设置一些默认参数。然后，使用该实例发送 GET 请求，并指定请求的 URL 和可选的配置参数。最后，在 then 方法中处理返回的 JSON 数据。希望本文能帮助到刚入行的小白理解如何使用 axios 的 getJSON 方法。
