我如何从取回和显示在div返回数据?

Question

例如，以下是远程URL上的JSON内容:

{ "title": "The title", "description": "The description" }

你能帮我一下吗?

• 我想从远程url(异步任务)获取json数据。
• 当返回值时，我想在DIV中显示标题(json)。

下面的函数显示"[object Promise]">

async buildWidget() {
var id = "whatever"
let data = await fetch('getItem.php?id=' + id + '&callback=getJSONP');
var json = data.json();

return json.title;
}

请不要使用JQuery。

感谢

Answer 1

对.json()使用await，因为它是异步的，即

async buildWidget() {
var id = "whatever"
let data = await fetch('getItem.php?id=' + id + '&callback=getJSONP');
var json = await data.json();

return json.title;
}

Answer 2

fetch方法返回一个承诺,所以只要awaitJSON回应它。然后，您可以简单地获得data.title或data.description等属性并将其渲染到DOM。

async function buildWidget() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
document.getElementById('data').innerHTML = data.title;
}
buildWidget();

<div id="data"></div>

Answer 3

首先.json()返回一个承诺，然后还需要await为它。

第二:async函数是异步的，它们返回一个promise。

async buildWidget() {
var id = "whatever"
let data = await fetch('getItem.php?id=' + id + '&callback=getJSONP');
var json = await data.json();

return json.title;
}
buildWidget().then(title => {
console.log(title)
})