async 整理

async

async 函数

• async 关键字 写在函数的前面 叫 async 函数

• 作用: 用于解决异步程序产生的 bug.

• async 函数只要执行就会返回 promise 实例对象

• 因此对async函数可以直接then，返回值就是then方法传入的函数。

• async 本身是一个语法糖

  • 语法糖:带有一定功能的关键字
  • 功能:创建并返回一个 promise 实例

async function foo(p) {
  console.log("foo run", p);  //foo run 1

  // promise.[[PromiseValue]]中
  return 1;
}
var res = foo(1);
console.log(res);  // Promise {<fulfilled>:1}

var bar = (async function () {})(async function () {});

var obj = {
  async bar() {
    console.log("121234567");  //121234567
    return 123;
  },
  foo: async () => {},
  test: function () {},
};
console.log(obj.bar());  //Promise {<fulfilled>:123}

// 输出:foo run 1  Promise {<fulfilled>:1}   121234567     Promise {<fulfilled>:123}

async 函数 return

• await 关键字只能用在 aync 定义的函数内。async 函数会隐士地返回一个 promise，该 promise 的 reosolve 值就是函数 return 的值。

• 也可以通过函数返回值的方式

async function foo() {
  console.log("foo run");
  return 123;
}

// res 作用:接受 async foo 函数返回值  是promise
let res = foo();
// res = async return
// res = new Promise()
// res = promises实例

async 中的 await

await

• await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

• await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

• 它也是:

  • async/await 是写异步代码的新方式，以前的方法有回调函数和 promise
  • async/await 是基于 promise 实现的，他不能用于普通的函数
  • async/await 与 promise 一样，是非阻塞的
  • async/await 使得异步代码看起来像同步代码

• 1: await 需要在 async 中写

• 2: 后是 promise 实例

• 3: await 作用 获取 promise.[[PromiseValue]]的值

• [[PromiseValue]]那些能赋值:

  • 1: async 函数的 return
  • 2: new promise 中的 resolve 实参
  • 3: then 中 return (catch finally 中 return)
  • 4: Promise.resolve()实参 Promise.reject()实参

  await[[PromiseValue]]取值

  (async () => {
    // resole 实参去哪了  ---->  p.[[promiseValue]]
    let p = new Promise((resolve, reject) => {
      resolve(123);
    });
    console.log(p);
  
    //    Promise.resove() 实参去哪了 ----->  p1.[[promiseValue]]
    let p1 = Promise.resolve("234");
    console.log(p1);
  
    // then-callback 的retrun去哪里了 ----> p2.[[promiseValue]]
    let p2 = p1.then((res) => 456);
    console.log(p2);
  
    // foo的return 的中去哪的?   ------> p3.[[promiseValue]]
    async function foo() {
      return 789;
    }
  
    let p3 = foo();
    console.log(p3);
  
    // awiat 开始你的表演..................
  
    // res作用是接受 await 的返回值
    let res = await p;
    console.log(res); // 123
    let res1 = await p1;
    console.log(res1); // 234
    let res2 = await p2;
    console.log(res2); // 456
    let res3 = await p3;
    console.log(res3); // 789
    // 综上所诉
    // 语法: await promise实例
    // 作用:  获取 promise实例.[[PromiseValue]] 的值
  })();
  

• [[promiseValue]] 赋值 查询有哪些方式

  • [[promiseState]]:fufiled 状态赋值:赋值:

    • resolve() 实参
    • then-callback return
    • catch-callback return
    • finally-callback return
    • Promise.resolve() 实参

  • [promiseState]]:fufiled 状态赋值:读取值;

    • then-callback 形参
    • await 返回值

同步程序异步写法

• 同步写法…实际上异步程序
• 等 await 执行结束 执行下一个 await
• ------> 解决异步问题导致问题程序运行 bug

(async () => {
  let p = new Promise((resolve, reiect) => {
    setTimeout(() => {
      resolve(111);
    }, 1000);
  });
  let p1 = new Promise((resolve, reiect) => {
    setTimeout(() => {
      resolve(222);
    }, 500);
  });
  let p2 = new Promise((resolve, reiect) => {
    setTimeout(() => {
      resolve(333);
    }, 1000);
  });

  console.log("同步111111111111111");
  p.then((res) => {
    console.log(res);
  });
  p1.then((res) => {
    console.log(res);
  });
  p2.then((res) => {
    console.log(res);
  });
  console.log("22222222222222222");
})();

// 输出:  11111111111   222222222222222    222   111  333