获取restful api的主体有问题吗

Question

我正在学习如何正确地将javascript中的API提取到代码中，并且在检索身体的特定部分时遇到了一些问题。理想情况下，我希望将要保存到稍后使用的变量中的设置和正文的笑点部分保存下来。

我写了这个：

fetch("https://dad-jokes.p.rapidapi.com/random/joke", {
"method": "GET",
"headers": {
"x-rapidapi-host": "dad-jokes.p.rapidapi.com",
"x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793"
}
})
.then(res => res.json())
.then(data => console.log(data));

返回这个：

{
{
success: true,
body: [
{
_id: "60dd3699212bcedc7b8720a1",
setup: "I saw a poster today for a free concert for those working in public health. It said 'Frontline Only'...",
punchline: "Weird. I would've thought they'd fill the whole venue.",
type: "health",
likes: [],
author: { name: "unknown", id: null },
approved: true,
date: 1618108661,
NSFW: false
}
]
}

如上所述，我希望将笑话的设置和笑点保存到一个单独发布的变量中。我该怎么做？谢谢

Answer 1

您可以为要提前获取的数据定义变量。由于"data.body"是一个数组，长度为一个元素，我们必须使用data.body[0]访问它。然后您可以使用元素的名称分配变量，例如"body[0].setup"。

这应该有效！：-(

var setup;
var punchline;
var data = await fetch("https://dad-jokes.p.rapidapi.com/random/joke", {
"method": "GET",
"headers": {
"x-rapidapi-host": "dad-jokes.p.rapidapi.com",
"x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793"
}
})
setup = data.body[0].setup; 
punchline = data.body[0].punchline; 
console.log(data); 
console.log(setup); 
console.log(punchline);

Answer 2

我认为您遇到的问题是fetch((是异步的。因此，出现在程序中fetch语句后行的代码将在then((语句前执行。一个简单的例子：

runsFirst();
fetch.then(() => runsThird());
runsSecond();

因此，当您试图在then((语句之外记录这些值时，实际上是在设置之前记录它们。要真正获得值，您需要：

var setup;
var punchline;
fetch("https://dad-jokes.p.rapidapi.com/random/joke", {
"method": "GET",
"headers": {
"x-rapidapi-host": "dad-jokes.p.rapidapi.com",
"x-rapidapi-key": "79142f2e8cmsh903cd5752a9ee77p1166f8jsnb9c812f77793"
}
})
.then(res => res.json())
.then(function (data){
//Logs data
setup = data.body[0].setup; 
punchline = data.body[0].punchline; 
console.log(setup, punchline); 
});
//Logs undefined
console.log(setup, punchline); 

如果您发现这种语法令人困惑，可以使用async/await，然后行将或多或少地按照它们的编写顺序执行，尽管浏览器支持不是很好。