7-异步解决办法

Huxzhi小于 1 分钟

7-异步解决办法

异步解决方案

  • callback
  • promise
  • async/await

callback 回调函数

// callback
function getData(callback) {
  setTimeout(() => {
    callback("结果");
  }, 10001);
}
getData((res) => {
  console.log("res", res);
});
console.log("res2");

promise

ES6 Promise 有三种状态 ,pending =>转换成两个状态 resolve / reject 不可逆

function p1(param) {
  return new Promise((resolve, reject) => {
    // resolve("结果" + param);
    reject("error");
  });
}
p1("123")
  .then((res) => {
    console.log("promise", res);
  })
  .catch((err) => {
    console.log("promise err", err);
  });

// 参数为 promise对象组成的数组
Promise.all([p_1(), p_2(), p_3()])
  .then((res) => {
    console.log("promise all", res);
  })
  .catch((err) => {
    // 返回最近的一个错误
    console.log("promise all err", err);
  });

async/await

ES7 async 可以单独使用 并且返回的是 promise 对象 await (后面跟的是个异步/promise) 必须配合 async 使用,不然会报错

function fun() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([1, 2, 3]);
    }, 100);
  });
}
//  async可以单独使用 并且返回的是promise对象
//  await (后面跟的是个异步/promise) 必须配合async使用,不然会报错
async function getData() {
  const res = await fun();
  console.log("res", res);
  return "你好";
}
console.log("结果", getData());