Question

我正在尝试重做当前使用回调使用async，await的代码。唯一的是，在当前设置中，我对应该如何编写感到有些困惑。

设置是：

我点击触发clicker功能的按钮
clicker函数触发ajax函数
ajax函数执行fetch请求
响应返回后，我需要将响应传递给clicker函数

目前，我从undefined函数中获得了ajax，有人可以帮忙指出问题所在吗？

var ajax = function() {
	fetch('https://jsonplaceholder.typicode.com/todos/1')
		.then(response => response.json())
		.then(json => { console.log('ajax function', json); return json; })
		.catch(error => console.log(error))
};

var clicker = async function() {
	var a = await ajax();
	console.log('clicker function', a);
};

<div onclick="clicker(event, this);">
	Test Me
</div>

Answer 1

尝试

var ajax = async function() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/todos/1')
    let json = await response.json();
    console.log('ajax function', json)
    return json;

  } catch (error) {
    console.log(error)
  };
};

var clicker = async function() {
  var a = await ajax();
  console.log('clicker function', a);
};

.btn { border-radius: 5px; background: #00ff00; width: 80px; padding: 10px;cursor: pointer; }

<div class="btn" onclick="clicker(event, this);">
  Test Me
</div>

Answer 2

您只能await个承诺。

ajax()的返回值为undefined，因为它没有return语句。

fetch返回一个承诺，但您不返回。

添加一个返回语句：

return fetch('https://jsonplaceholder.typicode.com/todos/1')

异步并在获取请求后等待

2 个答案: