Learning JavaScript Async Await In Depth All In One

Learning JavaScript Async Await In Depth All In One

深入学习 Async Await

const url = `https://cdn.xgqfrms.xyz/json/cats.json`;

const getJSON = async (url) => {
  const res = await fetch(url);
  // 再次 await，返回的还是 promise，多此一举 ❌
  console.log(`res`, res);
  return await res.json();
}

// await 返回值，容易误导导致错误的使用方式 ❌
getJSON(url);

// 使用的时候才需要 await / Top Await ✅
await getJSON(url);

const url = `https://cdn.xgqfrms.xyz/json/cats.json`;

const getJSON = async (url) => {
  const res = await fetch(url);
  // 再次 await，返回的还是 promise，多此一举 ❌
  console.log(`res`, res);
  return await await await res.json();
}

// await 返回值，容易误导导致错误的使用方式 ❌
getJSON(url);

抬杠 ✅

完全没有必要使用 await 处理 res 呀

// return await res.json();
return res.json();

res.json() 返回的是一个 promise，所以要 await 哦。❌

const demo = async (endpoint) => {
  const res = await fetch(`${endpoint}/posts`);
  // 再次 await，返回的还是 promise，多此一举 ❌
  // 脱裤子放屁，多此一举 ❌
  return await res.json();
}

const demo = async (endpoint) => {
  const res = await fetch(`${endpoint}/posts`);
  // res 已经 await 成功了，不需要再次 await ✅
  return res.json();
}

React Hooks

https://time.geekbang.org/dashboard/comment

async function return await 错误的使用方式 ❌

https://time.geekbang.org/column/article/381423

useCallback(async () => { const res = await fetch(`${endpoint}/posts`); return await res.json(); }, [])

async () => { const res = await fetch(`${endpoint}/posts`); return await res.json(); }

const url = `https://cdn.xgqfrms.xyz/json/cats.json`;

async function demo(promise) {
  const json = await promise();
  console.log(`json =`, json);
}

demo(async (url = `https://cdn.xgqfrms.xyz/json/cats.json`) => {
  const res = await fetch(url);
  // res 已经 await 成功了，不需要再次 await ✅
  console.log(`res`, res);
  return res.json();
});


demo(async (url = `https://cdn.xgqfrms.xyz/json/cats.json`) => {
  const res = await fetch(url);
  // 再次 await，返回的还是 promise，多此一举 ❌
  console.log(`res`, res);
  // return await  res.json();
  // await 返回的是 thenabled 的 promise 可以无限 await，蛋疼呀！
  return await await await res.json();
});

https://time.geekbang.org/dashboard/notes

https://horde.geekbang.org/home

json()

https://developer.mozilla.org/en-US/docs/Web/API/Response/json

promise

thenables

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#thenables

await

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

async function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

demos

const url = `https://cdn.xgqfrms.xyz/json/cats.json`;

// ES5 Function & async function
async function getJSON (url) {
  const res = await fetch(url);
  // res 已经 await 成功了，不需要再次 await ✅
  console.log(`res`, res);
  return res.json();
}

// 使用的时候才需要 await / Top Await
await getJSON(url);

const url = `https://cdn.xgqfrms.xyz/json/cats.json`;
// ES6 Arrow Function & async function
const getJSON = async (url) => {
  const res = await fetch(url);
  // res 已经 await 成功了，不需要再次 await ✅
  console.log(`res`, res);
  return res.json();
}

// 使用的时候才需要 await / Top Await
await getJSON(url);

json apis

https://cdn.xgqfrms.xyz/json/cats.json

https://cdn.xgqfrms.xyz/json

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---