整理一下Promise 的用法

Promise 的定义

Pormise是JS的异步编程的一种解决方案,在ES6将其写进了语言标准,提供了原生的Promise对象。

Promise简单来理解就是一个容器,里面存放着某个未来才会结束的事件结果。Promise是一个对象,从它可以获取异步操作的消息,Promise提供了统一的API,各种异步操作都可以用同样的方法进行处理。

Promise有下面两个特点:

  1. 对象的状态不受外界影响。有三种状态:padding(进行中)、fulfilled(成功)、rejected(失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
  2. 一旦状态改变,就不会再变,任何时候都可以得到这个结果。三个状态只有从padding到fulfilled或者从padding到rejected。状态只有从padding改变到fulfilled或者refected,两种改变。

有了Promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操作更加容易。

Promise存在的缺点

  1. 无法取消Promise,一旦新建它就会立即执行,无法中途取消。
  2. 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
  3. 当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

Promise基本用法

const promise = new Promise((resolve, reject) => {
  let status = true;
  if (status) {
    resolve(‘操作成功!‘);
  } else {
    reject(‘操作失败!‘);
  }
});

promise.then(res => {
  console.log(‘成功结果:‘ + res);
}, error => {
  console.log(‘失败结果:‘ + error);

});

ES6中,Promise对象是一个构造函数,用来生成Promise实例。Promise构造函数接受一个函数作为参数,接受两个参数,分别是resolve和reject两个函数。

其中,resolve函数作用是将Promise的状态从padding改变成fufilled;而reject函数作用是将Promise的状态从padding改变成rejected。

在Promise实例生产后,可以用then方法分别指定了fufilled状态和rejected状态的回调函数。

其中then方法接受两个参数,第一个回调函数是状态改变fufilled时调用的,第二个回调函数是状态改变refected时调用的。第二个参数是可选的,不一定要提供。

const promise = new Promise((resolve, reject) => {
  console.log(‘new Promise()‘);
  resolve();
});

promise.then(() => {
  console.log(‘resolve()‘);
});

console.log(‘End‘);

上面是一个Promise对的简单写法,我们看下上面的例子是如何输出的。

// 执行结果
new Promise()
End
resolve()

在上面的例子中因为Promise对象是同步的所以先输出,then方法是异步的所以后输出。

Promise的语法糖then

Promise实例具有then方法,then方法是定义在原型对象Promise.prototype上的。它的作用前面说过,第一个回调函数是状态改变fufilled时调用的,第二个回调函数(可选)是状态改变rejected时调用的。

new Promise((resolve, reject) => {
  resolve(‘王小端Coder‘);
}).then(res => {
  console.log(res); // 王小端Coder
});

then方法的基础调用写法,可以写一个回调方法,来执行成功后的回调。then方法返回一个的是一个新的Promise实例,因此我们可以采用链式写法,即then方法后面再调用一个then方法。

new Promise((resolve, reject) => {
  resolve(‘王小端Coder‘);
}).then(res => res).then(res => {
  console.log(res); // 王小端Coder
});

采用链式的then,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise对象(即有异步操作),这时后一个回调函数,就会等待该Promise对象的状态发生变化,才会被调用。

Promise的语法糖catch

catch是用于指定发生错误的回调函数。

new Promise((resolve, reject) => {
  reject(‘失败‘);
}).catch(error => {
  console.log(error); // 失败
});

Promise实例当状态改变为rejected状态或者操作失败抛出异常错误,就会被catch方法捕获。所以在Promise实例中reject方法等同于抛出错误。如果Promise的状态已经变成了resolved,再抛出错误无效。

new Promise((resolve, reject) => {
  reject(‘失败‘);
  throw new Error(‘抛出异常‘); // 这行无效
}).catch(error => {
  console.log(error); // 失败
});

Promise的finally方法

finally方法用于指定不管Promis对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

new Promise((resolve, reject) => {
  resolve();
}).then(res => {
  console.log(‘success‘);
}).catch(error => {
  console.log(‘error‘);
}).finally(() =>{
  console.log(‘finally‘);
})

Promise的all方法

Promise.all方法用于将多个Promise实例,包装成一个新的Promise实例。在all方法中可以传递多个Promise对象,当所有的Promise对象状态都返回fufilled,才会返回fulfilled,否则返回rejected。

const promise1 = new Promise((resolve, reject) => {
  resolve();
})
const promise2 = new Promise((resolve, reject) => {
  resolve();
})
const promise3 = new Promise((resolve, reject) => {
  resolve();
})

const promiseAll = Promise.all([promise1, promise2, promise3]).then(res => {
  console.log(‘all‘);
})

Promise的race方法

Promise.race方法同样是将多个Promise实例,包装成一个新的Promise实例。可以传递多个Promise对象作为参数,如果实例红有一个实例率先改变状态,那么race的状态就会跟着改变。

const promise1 = new Promise((resolve, reject) => {
  reject();
})
const promise2 = new Promise((resolve, reject) => {
  resolve();
})
const promise3 = new Promise((resolve, reject) => {
  reject();
})

const promiseRace = Promise.race([promise1, promise2, promise3]).then(res => {
  console.log(‘race then‘);
}).catch(error => {
  console.log(‘race catch‘);
})

Promise 结束!谢谢大家能够指出其中的不足。

原文地址:https://www.cnblogs.com/wangshucheng/p/promise-code.html

时间: 2024-10-05 05:07:15

整理一下Promise 的用法的相关文章

[js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下promise的常见用法. 为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在项目中常用的静态方法:all, race, reject,resolve等,原

ES6 Promise的用法(摘抄)

Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise(function(resolve, reject){    //做一些异步操作    setTimeout(function(){        console.log('执行完成');        resolve('随便什么数据');    }, 2000);}); Promise的构造函数接收

ES6 promise的用法

function runAsync(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('执行完成'); resolve('随便什么数据'); }, 2000); }); return p; } runAsync() 接下来调用runAsync()方法 runAsync().then((res)=>{ console.log(res); // res:随便什么

promise基础用法

/** * Created by liyinghao on 2016/11/6. */ const fs = require('fs'); /* * 新建一个Promise对象,Promise就是一个容器,里面放置一个异步执行的API * */ const p1 = new Promise((resolve, reject)=>{ fs.readFile('./a.txt','utf8',(err,data)=>{ if(err){ /* * 容器中异步任务失败之后调用reject方法,把错误

整理标签定义和用法

1<body> 元素定义文档的主体.<body> 元素包含文档的所有内容(比如文本.超链接.图像.表格和列表等等.)2<div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任何格式与其关联.如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效. 用法<div> 是一个块级元素.这意味着它的内容自动地开

Promise的用法

promise.then().promise.catch().Promise.all()... Promise 构造函数接受一个函数作为参数,该函数的2个参数分别是 resolve 和 reject.他们是2个函数,有 JavaScript 引擎提供,不用自己部署. var promise = new Promise ( function ( resolve, reject) { if ( /* 异步操作成功 */ ) { resolve (value) } else { reject (err

promise 基本用法

new Promise((resolve, reject) => { setTimeout(() => {//什麼情況下執行,比方說接口請求成功 resolve({name:'san'}); }, 500);}).then(val => {//成功回調 console.log(val.name);//san}, err => { console.error(err);//报错}); ......... new Promise((resolve, reject) => { co

Promise 的 用法及实现

Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示. 语法 new Promise( function(resolve, reject) { 函数体 }); 在函数体中,调用 resolve 会把状态改为成功 , reject 把状态改为失败,状态只可操作一次. 状态改变之后,会继续执行Promise的then函数 Promise 对象一共有三个状态 ( [[ PromiseStatus ]] ) : pending : 初始状态 fullfilled : 成功 rejec

ES6关于Promise的用法

Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作. 它的一般表示形式为: new Promise( /* executor */ function(resolve, reject) { if (/* success */) { // ...执行代码 resolve(); } else { /* fail */ // ...执行代码 reject(); } } );