被异步行为混淆

Question

我正在使用尝试/捕获来提出一些提取请求，然后我从HTML中提取标题并将其添加到我的对象“ SleekResponse”中 当我尝试解析身体并将其添加到该对象中时，我对退货值有问题，而不包括我从HTML中提取的标题，

我知道这与异步性有关，或者我对诺言的理解，但我无法说明为什么返回值与在发送之前记录的值不同。

async function fetchUrl(url) {
  console.log(url);
  try {
    const myInit = {
      mode: 'cors'
    }

    let sleekResponse = {};

    await fetch(url, myInit).then(function (response) {
      sleekResponse.redirected = response.redirected;
      sleekResponse.status = response.status;
      return response;
    })
    .then((response) => titleWait(response))
    .then((res) => sleekResponse.title = res)

    function titleWait(response) {
      Promise.resolve(response.text()).then((res) => {
        a = res.split('<title>');
        b = a[1].split('</title>')
        sleekResponse.title = b[0];
        return sleekResponse;
      })
      console.log(sleekResponse);
      return sleekResponse;
    }

    console.log(sleekResponse); // This logs the correct value
    return sleekResponse; // when it's returned it doesn't show the title that was added
  } catch (err) {
    return `${err}`;
  }
}

我尝试了很多事情，我不记得我尝试过的一切。我知道我缺少可能很明显的东西，但是我仍然不明白为什么台。Log值与以后返回的值不同。

Answer 1

主要问题是title Wait没有返回其自己的承诺：

    function titleWait(response) {
      return Promise.resolve(response.text()).then((res) => {
        a = res.split('<title>');
        b = a[1].split('</title>')
        sleekResponse.title = b[0];
        return sleekResponse;
      });
    }

这仍然是一种非常令人费解的写作方法。这更好：

    async function titleWait(response) {
      const res = await response.text());
      const a = res.split('<title>');
      const b = a[1].split('</title>')
      sleekResponse.title = b[0];
      return sleekResponse;
    }

Answer 2

我希望我能帮助

这个基本的 fetch();

const response = await fetch('your url') 

const data = await response.json();

console.log(data);