对异步行为感到困惑

Question

我正在使用 try/catch 发出一些获取请求，然后我从 HTML 中提取标题并将其添加到我的 object 'sleekResponse' 当我尝试解析 body 并将其添加到 object 时，我遇到了 return 值的问题，其中不包括我从 HTML[= 中提取的标题11=]

我知道这与异步性或我对 Promises 的浅薄理解有关，但我不知道为什么 return 值与发送前记录的值不同。

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}`;
  }
}

我尝试了很多东西，但我不记得我尝试过的所有东西。我知道我遗漏了一些可能很明显的东西，但我仍然不明白为什么 console.log 值与 return 一行后的值不同。

Answer 1

希望能帮到你

这个基本的 fetch();

const response = await fetch('your url') 

const data = await response.json();

console.log(data);

Answer 2

主要问题是 titleWait 没有 return 自己的承诺：

    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;
    }

对异步行为感到困惑

Confused by async behavior

javascript

asynchronous

fetch

promise

async-await