Promise对象

作者: 钢笔先生 | 来源:发表于2019-11-27 22:41 被阅读0次

[20190512]

异步编程的一种解决方案。

对比对象:回调函数和事件。

对比结果:更合理更强大。

简单说,就是容器。里面保存着某个未来才会结束的事件。通常是异步操作。

Promise是一个对象,从它上面可以获得异步操作的消息。统一的API,各种异步操作都可以用同样的方法进行处理。

Promise对象的两大特点

  • 对象的状态不受外界影响
  • 状态一旦改变,就不会再变

Promise对象代表一个异步操作。有三种状态:

  • pending 进行中
  • fulfilled 已成功
  • rejected 已失败

只有异步操作的结果才可以决定当前是哪种状态。其他操作都无法改变这个状态,即承诺,其他手段无法改变。

Promise状态改变的两种可能

  • pending --> fulfilled
  • pending --> rejected

单向数据流,一旦这两种状况之一发生,状态就凝固了,不会再变了,会一直保持这个结果,此时就成为resolved(已定型)

注意:如果改变已经发生,再对Promise对象添加回调函数,也会立即得到这个结果。

和事件的区别是,一旦事件错过了,再去监听是得不到结果的。

优点

有了Promise,就可以将异步操作以同步操作的流程表达出来,避免层层回调函数。

Promise对象还提供了统一的接口,使得控制异步操作更加容易了。

缺点

  • 无法取消Promise,一旦新建它就会立即执行,无法中途取消。

  • 如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。

  • 处于pending状态,无法得知目前进展到哪个阶段

基本使用

下面这个就是基本使用框架:

const promise = new Promise(function(resolve, reject) {
    if (/* 异步操作成功 */) {
        resolve(value);
    } else {
        reject(error);
    }
});

注意,Promise构造函数接受一个函数作为参数,该函数的两个参数分别是:

  • resolve
  • reject

这也是两个函数,由JavaScript引擎提供,不用自己部署。

resolve函数:pending --> fulfilled

Promise对象的状态从未完成变成成功

在异步操作成功时调用,并将异步操作的结果作为参数传递出去。

reject函数:pending --> rejected

异步操作失败时调用,将异步操作报出的错误作为参数传递出去。

promise.then分别指定两个状态的回调函数

promise.then(function(value) {
    // success
}, function(error) {
    // failure
});

需要在生成实例之后使用。第一个函数表示Promise对象变成resolved时调用,第二个回调函数在状态变为rejected时调用。

注:第二个函数是可选的。

两个函数的参数都是来自Promise对象传出的值。

function timeout(ms) {
    return new Promise((resolve, reject) => {
       setTimeout(resolve, ms, 'done'); 
    });
}

timeout(100).then((value) => {
    console.log(value);
})

注意done会作为resolve的参数。

Q: resolve函数到底要干嘛啊??

记住这个框架:异步操作执行完毕后,就调用resolve函数,否则就调用reject方法。

Promise实现Ajax

const getJSON = function(url) {
    const promise = new Promise((resolve, reject) => {
        const handler = function() {
            if (this.readyState !== 4) {
                return;
            }
            if (this.status == 200) {
                resolve(this.response);
            } else {
                reject(new Error(this.statusText));
            }
        }
        const client = new XMLHttpRequest();
        client.open('GET', url);
        client.onreadystatechange = handler;
        client.responseType = 'json';
        client.setRequestHeader('Accept', 'application/json');
        client.send();
    });
    return promise;
};

// 调用函数
getJSON('/posts.json').then(function(json) {
    console.log("Contents: " + json);
}, function(error) {
    console.error('出错了', error);
});

http://es6.ruanyifeng.com/#docs/promise

END.

相关文章

  • Promise,async,await笔记

    Promise,async,await笔记 Promise 创建promise对象 Promise对象构造方法传入...

  • Promise then方法的链式调用

    返回的是非promise对象 优化:可能返回promise对象和非promise对象

  • ES6之promise(resolve与reject)

    一、 Promise.resolve() 有时需要将现有对象转为 Promise 对象,Promise.resol...

  • ES6-Promise对象 (下)

    ES6-Promise对象 (上) 1.Promise对象方法 (1)Promise.all(iterable);...

  • Promise对象原理解析

    Promise对象原理解析 ES6 原生提供了 Promise 对象。所谓 Promise,就是一个对象,用来传递...

  • ES6之promise(基本用法)

    一、promise的含义 Promise对象有以下两个特点。 (1)对象的状态不受外界影响。Promise对象代表...

  • Promise用法小结

    Promise 的含义 Promise对象有以下两个特点 :(1)对象的状态不受外界影响。Promise对象代表一...

  • 关于Promises

    一、名字 promise(首字母小写):一个对象,Promise的实例对象 Promise(首字母...

  • Promise

    Promise对象就是一个异步请求占位符对象 把异步请求封装在Promise对象中,Promise的构造函数传入一...

  • Promise

    Promise/A+ 英文 中文 实现Promise对象

网友评论

    本文标题:Promise对象

    本文链接:https://www.haomeiwen.com/subject/kqomwctx.html