async与await.md

基本定义

async 函数

async function 用来定义一个返回 AsyncFunction对象的异步函数，异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的Promise返回结果

• 函数的返回值为 Promise 对象
• promise 的结果由 async 函数执行的返回值决定

await 表达式

await 操作符用于等待一个 Promise 对象，它总能在异步函数 async function 中使用

• await 右侧的表达式一般为 promise 对象，但也可以是其他的值
• 如果表达式是 promise 对象，await 返回的就是 promise 成功的值

test

• 普通函数

	function fn() {
	  return 1;
	}
	const result = fn();
	console.log(result);     
	
	// 1

• 加 async

    async function fn() {
      return 1;
    }
    const result = fn();
    console.log(result);

通过打印出来的结果可以知道
async 函数的返回结果是一个promise类型的对象👆👆

除了成功的返回结果之外也可以功过 throw 来抛出：

    async function fn() {
      // return 1;
      throw 2;
    }
    const result = fn();
    console.log(result);

也可以写成这样

    async function fn() {
      // return 1;
      throw 2;
    }
    const result = fn();
    // console.log(result);
    result.then(
      value => {
        console.log("onResolved(): ", value);
      },
      reason => {
        console.log("onRejected(): ", reason);
      }
    )

    async function fn() {
      // return 1;
      // throw 2;
      return Promise.resolve(3);     //返回一个成功的 promise
      // return Promise.reject(3);     //返回一个失败的 promise
    }
    const result = fn();
    // console.log(result);
    result.then(
      value => {
        console.log("onResolved(): ", value);
      },
      reason => {
        console.log("onRejected(): ", reason);
      }
    )

可以看到这样返回的结果和之前 return 直接返回的是一样的

async 函数返回的promise 的结果由函数执行的结果决定

当然这里也可以返回带有延迟的函数

    async function fn() {
      // return 1;
      // throw 2;
      // return Promise.resolve(3);     //返回一个成功的 promise
      // return Promise.reject(3);     //返回一个失败的 promise

      // 也可以返回一个延迟成功/失败的
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(4);
        }, 1000);
        console.log("waiting 1s...")
      })
    }
    const result = fn();
    // console.log(result);
    result.then(
      
      value => {
        console.log("onResolved(): ", value);
      },
      reason => {
        console.log("onRejected(): ", reason);
      }
    )

这里是先打印了 waiting 1s… ，1秒钟之后出来的下面的结果

• await

先定义两个函数

function fn2() {
   return Promise.resolve(2);
}

function fn3() {
  const result2 = fn2();
}

这里要想拿到fn2()函数的值2，之前的写法是需要通过 .then() 然后获取到它的 value 值

下面用await来试试

    function fn2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(5);
        }, 1000);
        console.log("waiting 1s...")
      })
    }

    function fn3() {
      return 6;
    }

    async function fn4() {
      // 这里的await 的意思就是等到 fn2() 执行完有结果的时候
      // await右侧表达式为promise，得到的结果就是promise成功的value
      const value = await fn2();
      // await右侧表达式不是promise，得到的结果就是右侧表达式结果
      const value2 = await fn3();

      console.log(value, "value");
      console.log(value2, "value2")
    }

    fn4()

规定只要用了 await 之后就必须使用 async ，不然会报错

await 只能得到成功的结果，如果想得到失败的结果，就必须进行 try…catch…

    function fn5(){
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(5);
        }, 1000);
        console.log("waiting 1s...")
      })
    }

    async function fn4() {
      // 这里的await 的意思就是等到 fn2() 执行完有结果的时候
      // await右侧表达式为promise，得到的结果就是promise成功的value
      // const value = await fn2();
      // await右侧表达式不是promise，得到的结果就是右侧表达式结果
      // const value2 = await fn3();
      
      // 得到失败的结果
      try {
        const value3 = await fn5();
        console.log("value3", value3);
      } catch (error) {
        console.log("失败的结果: ", error);
      }
      // console.log(value, "value");
      // console.log(value2, "value2")
    }
    fn4()

⚠️⚠️⚠️

      // 如果fn1()函数不返回promise，而是直接返回一个 1
      // 那么在fn7()里面的fn6()就不是单纯的1，而是一个promise
      // （因为fn6()左侧是定义有async，所以调用的fn6()是一个异步函数，异步函数执行的结果是一个promise）
      // 但是在fn6()前面加了一个await，所以 await fn6() 的结果就还是 1 了（我得到的value的结果是1并不是因为fn6()返回的结果是1，而是因为fn6()返回的promise成功了，而且成功的结果是1）
    async function fn6(){
      return 1;
    }

    async function fn7(){
      const value = await fn6();
      console.log("value6: ", value);
    }

• await必须写在async函数中，但async函数中可以没有await
• 如果await的promise结果失败了，就会抛出异常，就需要try…catch…来进行异常处理