设为首页 加入收藏

TOP

ES6中的Promise详解(一)
2019-09-25 11:19:36 】 浏览:63
Tags:ES6 Promise 详解

Promise 在 java script 中很早就有各种的开源实现,ES6 将其纳入了官方标准,提供了原生 api 支持,使用更加便捷。

定义

Promise 是一个对象,它用来标识 java script 中异步操作的状态(pending, resolve, reject)及结果(data)。

从控制台打印出来一个Promise 对象来看下


可以看到,它是一个构造函数,既有属于自己私有的 resolve, reject, all, race等方法,也有protype 原型上的 then, catch等方法。

基本用法

  • 模拟问题:3秒后请求完成,返回数据res.data
var p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('res.data');
  }, 3000);
});

p.then((val) => {
  console.log(val);
  // 'res.data'
});

console.log(p);
// [object Promise]

Promise.resolve() 的用法

Promise.resolve()方法可以将现有对象转为Promise 对象。

var p = Promise.resolve($.ajax('/something.data'));
p.then((val) => {console.log(val)});

它等价于
var p = new Promise(resolve => {
    resolve($.ajax('/something.data'))
});
p.then((val) => {console.log(val)});

Promise.reject() 用法

此方法和Promise.resolve()方法类似,除了rejecet 代表状态为 Rejected,不多说。

Promise.all() 用法

用于将多个Promise 实例包装成一个新的 Promise实例,参数为一组 Promise 实例组成的数组。

var p  = Promise.all([p1,p2,p3]);

当 p1, p2, p3 状态都 Resolved 的时候,p 的状态才会 Resolved;只要有一个实例 Rejected ,此时第一个被 Rejected 的实例的返回值就会传递给 P 的回调函数。

应用场景:假设有一个接口,需要其它两个接口的数据作为参数,此时就要等那两个接口完成后才能执行请求。

var p1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000'P1');
});
var p2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 2000'P2');
});
// 同时执行p1和p2,并在它们都完成后执行then:
Promise.all([p1, p2]).then((results) => {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

Promise.race() 用法

和Promise.all 类似,区别是 Promise.race() 只要监听到其中某一个实例改变状态,它的状态就跟着改变,并将那个改变状态实例的返回值传递给回调函数。

应用场景: 可以通过多个异步任务来进行容错处理,多个接口返回同样的数据,只要有一个接口生效返回数据即可。

Promise.prototype.then()

then 方法是定义在 Promise 的原型对象上的,作用是为 Promise 实例添加状态改变时的回调函数;

then() 返回一个新的Promise 实例,因此可以支持链式写法。

链式写法的一个例子//来自廖雪峰

// 0.5秒后返回input*input的计算结果:
function multiply(input) {
    return new Promise((resolve, reject) => {
        console.log('calculating ' + input + ' x ' + input + '...');
        setTimeout(resolve, 500input * input);
    });
}

// 0.5秒后返回input+input的计算结果:
function add(input) {
    return new Promise((resolve, reject) => {
        console.log('calculating ' + input + ' + ' + input + '...');
        setTimeout(resolve, 500input + input);
    });
}

var p =&n
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Nodejs安装 下一篇词法作用域 - 1

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目