JavaScript异步编程Promise

更新日期: 2021-10-21阅读: 1.2k标签: 异步

什么是Promise

Promise 是异步编程的一种解决方案。ES6中已经提供了原生Promise对象。一个Promise对象会处于以下几种状态(fulfilled,rejected两种状态一旦确定后不会改变):

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 意味着操作成功完成。
  • 已拒绝(rejected): 意味着操作失败。


基本用法

Promise对象是一个构造函数,用来创建Promise实例,它接收两个参数resolve和reject。

  • resolve的作用是将Promise对象的状态从pending变为fulfilled,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去。
  • reject的作用是将Promise对象的状态从pending变为rejected,在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
const promise = new Promise(function(resolve, reject) {
  // ... 
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后,使用then方法分别指定fulfilled状态和rejected状态的回调函数。

  • then接收两个参数,第一个是Promise对象的状态变为fulfilled时的回调函数,第二个是状态变为rejected时的回调函数。
  • catch接收Promise对象的状态变为rejected时的回调函数。
promise.then(function (value){
    // ....
},function (err){
    // .... err
})
  
promise.then(function (value){
    // ....
}).catch(function (err){
    // ....
})

Promise的方法

Promise.prototype.then()

then方法是定义在原型对象Promise.prototype上,前面说过,它接收两个可选参数,第一个参数是fulfilled状态的回调函数,第二个参数是rejected状态的回调函数。

then方法返回的是一个新的Promise实例,方便我们采用链式写法。比如then后面接着写then,当第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。这种链式方式可以很方便的指定一组按照次序调用的回调函数。

loadData().then(function (value){
    return 3
}).then(function (num){
    console.log("ok", num) // 3
})

Promise.prototype.catch()

catch方法是用于指定发生错误时的回调函数。如果异步操作抛出错误,状态就会变为rejected,就会调用catch()方法指定的回调函数,处理这个错误。

const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // 抛出错误状态变为 -> reject
});
const promise = new Promise(function(resolve, reject) {
  reject('unkonw error') // 使用reject()方法将状态变为 -> reject
});
promise.catch(function(error) {
  console.log(error);
});

Promise对象的错误会一直向后传递,直到被捕获为止。比如下面代码:catch会捕获loadData和两个then里面抛出的错误。

loadData().then(function(value) {
  return loadData(value);
}).then(function(users) {
 
}).catch(function(err) {
  // 处理前面三个Promise产生的错误
});

如果我们不设置catch(),当遇到错误时Promise不会将错误抛出外面,也就是不会影响外部代码执行。

const promise = new Promise(function(resolve, reject) {
      resolve(a) // ReferenceError: a is not defined
});
promise.then(function(value) {
  console.log('value is ', value)
});
setTimeout(() => { console.log('code is run') }, 1000); // code is run

Promise.prototype.finally()

finally()方法不管 Promise 对象最后状态如何,都会执行的操作。下面是我们使用 Promise 的一个常规结构。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.all()

Promise.all()方法可以将多个 Promise 实例包装成一个新的 Promise 实例返回。

const promise = Promise.all([p1, p2, p3]);

新promise状态来依赖于“传入的promise”。

  • 只有当所有“传入的promise”状态都变成fulfilled,它的状态才会变成fulfilled,此时“传入的promise”返回值组成一个数组,传递给promise的回调函数。
  • 如果“传入的promise”之中有一个被rejected,新promise的状态就会变成rejected,此时第一个被reject的promise的返回值,会传递给promise的回调函数。
const promises = [1,2,3,4].map(function (id) {
  return loadData(id);
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(function(err){
  // ...
});

Promise.race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

Promise.race()方法的参数与Promise.all()方法一样。

const promise = Promise.race([p1, p2, p3]);

Promise.all() 和 Promise.race()对比:

  • Promise.all() ,如果所有都执行成功则返回所有成功的promise值,如果有失败则返回第一个失败的值。
  • Promise.race(),返回第一个执行完成的promise 值,它可能是fulfilled和rejected状态。

这两个方法的使用场景。

场景一,用户登录社交网站主页后,会同时异步请求拉取用户信息,关注列表,粉丝列表,我们需要保证所有数据请求成功再进行渲染页面,只要有一个数据不成功就会重定向页面,这里可以使用Promise.all。

function initUserHome() {
  Promise.all([
  new Promise(getMe),
  new Promise(getFollows),
  new Promise(getFans)
])  
    .then(function(data){
        // 显示页面
  })
    .catch(function(err){
    // .... 重定向页面
  });
};

initUserHome();

场景二,假如我们在做一个抢票软件,虽然请求了很多卖票渠道,每次只需返回第一个执行完成的Promise,这里可以使用Promise.race。

function getTicket() {
  Promise.race([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 抢票成功
  })
    .catch(function(err){
    // .... 抢票失败,重试
  });
};

getTicket();

Promise.allSettled()

使用Promise.all()时,如果有一个Promise 失败后,其它Promise 不会停止执行。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

try {
  await Promise.all(requests);
  console.log('所有请求都成功。');
} catch {
  console.log('有一个请求失败,其他请求可能还没结束。');
}

有的时候,我们希望等到一组异步操作都结束了,再进行下一步操作。这时就需要使用Promise.allSettled(),的它参数是一个数组,数组的每个成员都是一个 Promise 对象,返回一个新的 Promise 对象。它只有等到参数数组的所有 Promise 对象都发生状态变更(不管是fulfilled还是rejected),返回的 Promise 对象才会发生状态变更。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

await Promise.allSettled(requests);
console.log('所有请求完成后(包括成功失败)执行');

Promise.any()

只要传入的Promise有一个变成fulfilled状态,新的Promise就会变成fulfilled状态;如果所有传入的Promise都变成rejected状态,新的Promise就会变成rejected状态。

Promise.any()和Promise.race()差不多,区别在于Promise.any()不会因为某个 Promise 变成rejected状态而结束,必须等到所有参数 Promise 变成rejected 状态才会结束。

回到Promise.race()多渠道抢票的场景,如果我们需要保证要么有一个渠道抢票成功,要么全部渠道都失败,使用Promise.any()就显得更合适。

function getTicket() {
  Promise.any([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 有一个抢票成功
  })
    .catch(function(err){
    // .... 所有渠道都失败了
  });
};

getTicket();

Promise.resolve()

Promise.resolve()方法将现有对象转换为Promise对象。等价于下面代码:

new Promise(resolve => resolve(1))

传入的参数不同,处理

  1. 参数Promise 实例,它将不做任何修改、原封不动地返回这个实例。
  2. 参数thenable对象,它会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then()方法。

    let thenable = {
      then: function(resolve, reject) {
        resolve(1);
      }
    };
  3. 参数是普通值,返回一个新的 Promise 对象,状态为resolved。

    const promise = Promise.resolve(1);
    
    promise.then(function (value) {
      console.log(value) // 1
    });
  4. 无参数,直接返回一个resolved状态的 Promise 对象。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

const promise = Promise.reject('unkonw error');
// 相当于
const promise = new Promise((resolve, reject) => reject('unkonw error'))

promise.then(null, function (s) {
  console.log(s)
});
// unkonw error

简单场景

异步加载图片:

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
      const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = url;
  });
}

请求超时处理:

//请求
function request(){
    return new Promise(function(resolve, reject){
          // code ....
         resolve('request ok')
    })
}

function timeoutHandle(time){
         return new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('timeout');
        }, time);
    });
}

Promise.race([
    request(),
    timeoutHandle(5000)
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)// timeout
})


链接: https://www.fly63.com/article/detial/10748

通过alert方法,去理解js中阻塞、局部作用域、同步/异步任务

javascript中alert是Bom中的成员函数,alert对话框是模态的,具有阻塞性质的,不点击是不会执行后续代码的。js的阻塞是指在调用结果返回之前,当前线程会被挂起, 只有在得到结果之后才会继续执行。

如何优化async代码?更好的编写async异步函数

如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它

【JS】异步处理机制的几种方式

Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。

js异步加载方式有哪些?_详解异步加载js的多种方案

js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性

Nodejs 处理异步(获取异步数据并处理)的方法

回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象

JS常用的几种异步流程控制

JavaScript引擎是基于单线程 (Single-threaded) 事件循环的概念构建的,同一时刻只允许一个代码块在执行,所以需要跟踪即将运行的代码,那些代码被放在一个任务队列 (job queue) 中

前端异步编程之Promise和async的用法

传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)

异步的JavaScript

JS本身是一门单线程的语言,所以在执行一些需要等待的任务(eg.等待服务器响应,等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了,浏览器可能会失去响应,从而造成不好的用户体验。

js 多个异步的并发控制

请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。

解读react的setSate的异步问题

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!