js 针对异步的处理

Promise

promise 的三种状态问题（pending、resolve、reject）

1. 在没有明确执行状态之前都是 pending（等待中）

let p1 = new Promise((resolve, reject) => {
  // 这里还没有明确执行 已解决 resolve（成功） 还是 已拒绝 reject（失败）
  console.log("pending...");
});
console.log(p1);
p1.then(
  () => {
    console.log("上一次的promise 还在 pending,这里的不会执行");
  },
  () => {
    console.log("上一次的promise 还在 pending,这里的不会执行");
  }
);

2. 明确执行状态（要么是 resolve 已解决 要么是 reject 已拒绝）

let p1 = new Promise((resolve, reject) => {
  try {
    resolve();
  } catch {
    reject();
  }
}).then(
  // 第一个函数对应于上面promise 形参中的 resolve
  () => {
    console.log("resolve...");
  },
  // ，第二个参数对应于上面promise 形参中的 reject
  () => {
    console.log("reject...");
  }
);

promise 的返回值问题

1. 如果没有返回值，那么默认是返回 resolve 状态的 promise

let p1 = new Promise((resolve, reject) => {
  resolve();
});
console.log(p1);
p1.then(
  () => {
    console.log("上一个 promise 已被成功执行");
  },
  () => {
    console.log("上一个 promise 已失败");
  }
);

有参数的情况

let p1 = new Promise((resolve, reject) => {
  resolve("13"); // 括号中的参数会作为下一次 then 的函数参数
});
console.log(p1);
// then 中传递两个函数作为参数，第一个是执行成功的函数（resolve 状态），第二个是执行失败的函数（reject状态）
p1.then(
  (res) => {
    console.log(res); // 13
  },
  () => {
    console.log("上一个 promise 已失败");
  }
);

2. 如果 return 的不是 promise 仍然会返回一个 promise ，只不过 return 值会作为回调参数

let p1 = new Promise((resolve, reject) => {
  resolve();
});
console.log(p1); // resolve(); 中没有传递参数
p1.then(
  // 所以 这里没有形参
  () => {
    // 返回值会作为参数传递给下一次 then 的函数参数
    return 13;
  },
  () => {
    console.log("上一个 promise 已失败");
  }
).then((res) => {
  console.log(res); // 13
});

3. 可以直接返回 promise

let p1 = new Promise((resolve, reject) => {
  console.log("第一块promise");
  resolve();
})
  .then(() => {
    // 这里明确返回一个 promise
    return new Promise((resolve, reject) => {
      console.log("第二块promise");
      // 如果这里明确了状态是 reject 那么下面的 then 方法中，只有第二个函数参数参数会执行
      reject();
    });
  })
  .then(
    () => {
      console.log("第三块promise");
    },
    () => {
      console.log("reject 状态的 promise");
    }
  );

promise 的其他方法

// 直接返回一个 状态为 resolve 的 promise 对象
Promise.resolve();

// 直接返回一个 状态为 reject 的 promise 对象
Promise.reject();

//要求 所有 promise 都是 resolve
// 数组中传递每一个 promise 对象，但是执行顺序不分先后
Promise.all([p1, p2, p3]).then((res) => {
  // res 存放着每一个 promise 在resolve 中传递的参数
  console.log(res);
});

// 根据 每一个 promise 的执行快慢来，会执行最先执行的一个promise
// res 中存放的也是最先执行的 resolve 或者 reject 中传递的参数
Promise.race([p1, p2, p3]).then((res) => {
  console.log(res);
});

比 promise 用法更加简洁的 async + await

function mlog(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(data);
      resolve();
    }, 1000);
  });
}

async function fn() {
  try {
    // await 会等待 resolve 的执行
    // await 后面也是跟 promise
    await mlog(1); // 等待 1 秒打印
    await mlog(2); // 等待 2 秒打印
    await mlog(3); // 等待 3 秒打印
  } catch (err) {
    // 会检测 reject
    console.log("err:", err);
  }
}

fn();

一个案例（异步加载图片）

// promise 的产生是为了解决回调地狱 callback hell
function loadImg(src) {
  let img = new Image();
  return new Promise((resolve, reject) => {
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(img);
    };
    img.src = src;
  });
}
// 这里异步加载两张图片
loadImg("./0.png")
  .then((img1) => {
    console.log(img1); // <img src="./0.png">
    return loadImg("./1.png");
  })
  .then((img2) => {
    console.log(img2); // <img src="./1.png">
    return img2;
  })
  .then((img2) => {
    console.log(img2); // <img src="./1.png">
  });

需要注意的地方

• promise 后面如果接的是 catch， 仍然有返回值，而且返回的也是 promise ，只不过 catch 能够捕获到一系列 then 方法中出现的 错误。