promise简介以及使用方法

掌握异步编程：Promise详解与实战应用

最新推荐文章于 2024-08-25 13:17:02 发布

原创最新推荐文章于 2024-08-25 13:17:02 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #vue.js

本文介绍了ES6中Promise的基本概念，包括其作用、状态转换及常见使用场景。通过实例演示如何创建、链式调用Promise处理异步任务，以及Promise在图片加载、并发操作和错误处理中的应用。

Promise简介

es6原生提供的Promise
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息
简单来讲promise就是用于处理异步任务的
Promise也可以将异步任务队列化

promise的异步操作状态

pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

Promise 对象的状态改变，只有两种可能：

从 Pending 变为 Resolved （异步任务成功）

从 Pending 变为 Rejected （异步任务失败）

而且状态发生后，是不会有改变的。

promise缺点

一旦开始执行就无法取消（一旦新建它就会立即执行，无法中途取消）

无法进度追踪（处于 Pending 状态时，无法得知目前进展到哪一个阶段）

promise使用

可以使用 new 来调用 Promise 的构造器来进行实例化。

let promise = new Promise(function(resolve, reject) {

  //promise的入参是一个回调函数，回调函数异步处理成功的回调和异步处理失败的  回调函数分别对应成功的resolve和失败的reject

  // 异步处理

  setTimeout(function(){

    resolve('do something')

    // 处理结束后、调用resolve 或 reject

  },1000)

});

//也可以采用链式调用的形式去触发他的回调函数

promise.then(res=>{

  console.log(res);

})

上述的截图仅仅是异步成功回调的案例，当然如果异步任务错误我们也可以去捕获到

写一个随机数1-10的数，大于5成功回调，反之失败回调

let promise = new Promise(function(resolve, reject) {
  // 异步处理
  setTimeout(function() {
    const num = Math.floor(Math.random() * 10);
    if (num > 5) {
      resolve('这个值＞5');
      return;
    }
    reject('这个值<5');
  }, 1000);
});
//也可以采用链式调用的形式去触发他的回调函数
promise.then(res => {
  console.log('reslove回调返回值',res);
});
promise.catch(res => {
  console.log('reject回调返回值',res);
});

Promise使用场景

图片依次加载

const imgUrl = ['img1', 'img2', 'img3'];

const downloadImgs = async () => {
  let promise = url => {
    return new Promise((resolve, eject) => {
      setTimeout(() => {
        console.log(url);
        resolve('ok');
      }, 1000);
    });
  };
  for (let item of imgUrl) {
    await promise(item).then(res => console.log(res));
  }
};

promise all 所有异步任务执行完毕后，将结果以数组形式返回

promise race 哪个先异步任务先操作完，就返回哪个异步任务的结果

let checkNum = 1;
const asyncDownload = () => {
  return new Promise((reslove, reject) => {
    setTimeout(() => {
      checkNum++;
        reslove(checkNum);    
    }, 1000);
  });
};

const asyncQueue = () => {
  //race的调用方法和all一样
  Promise.all([asyncDownload(), asyncDownload(), asyncDownload()]).then(
    res => {
      console.log('res', res);
    },
  );
};