我理解的 js 异步成长总结

Posted 2021-01-15 beautifulboy

本文是自己的理解，如果有错误的地方，还请各路大神指出

 

首先说下我最常用的 Promise

getHandlePickupQrPromise() {
  // 定义返回 Promise对象
  // Promise接收一个回调函数 (success,error)=>{} 
  return new Promise((resolve, reject) => {
    getPickupQr({
      str: JSON.stringify({ type: "order_consume", order_id: this.orderId })
    })((err, res) => {
      if (err) {
        // 出现错误回调 抛出 并返回错误信息
        reject(err);
      } else {
        if (res.data.errno === 0) {
          // 返回成功回调 抛出 并返回成功数据
          resolve(res.data.data.base64);
        } else {
          reject(new Error(res.data.errmsg));
        }
      }
    });
  });
}

getHandlePickupQrPromise().then((base64) => {
  // .then 成功的回调,参数是一个回调函数,用来执行拿到成功数据做之后的处理
  console.log(base64)
}).catch((err) => {
  // .catch 失败的回调,参数是一个回调函数,用来执行拿到失败数据做之后的处理
  console.log(err)
});

 

本人才疏学浅，如有不对的地方，还望大神指点一二

 

 

ES7 async await

// async 定义的函数会返回一个promise对象
async function test() {
  return 123;
}

test().then(val => {
  console.log(val);// 123
});

 

实例

let initPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("success")
    }, 3 * 1000);
  })
}

//async 必须包含 await 或者理解 await 必须出现在 async 函数内部，不能单独使用。
async function init() {
  //await 后面可以跟任何的JS 表达式
  // await 如果没有返回结果就不会继续走下面的 if else
  let data = await initPromise().catch(err => {
    // catch 出现错误的值 做接受到错误的处理
    console.log(err)
  })
  if (data) {
    console.log("有值了")
  } else {
    console.log(data)
  }
}
init()