探索Promise的应用-CFANZ编程社区

什么是 Promise ?

Promise 是异步编程的一种解决方案,用于异步操作

从语法上讲，promise是一个对象，从它可以获取异步操作的消息

从本意上讲，它是承诺，承诺它过一段时间会给你一个结果

promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；

状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

知识解析:

1、Promise的基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

下面代码创造了一个Promise实例。

var p = new Promise(function(resolve, reject) {
            if (5 < 3) {
                resolve('成功');
            } else {
                reject({
                    "msg": '失败',
                    "b": false
                });
            }
        });
        p.then(function(msg) {
            // console.log('resolve');
            console.log(msg);
        }, function(obj) {
            // console.log('reject');
            console.log(obj);
        });

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

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

p.then(function(msg) {
            // console.log('resolve');
            console.log(msg);
        }, function(obj) {
            // console.log('reject');
            console.log(obj);
        });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

5<3为false,所以执行了reject,所以输出:

{msg: "失败", b: false}

Promise 在ajax上的应用:

首先大家都明白了Promise是用来解决异步操作的,那么ajax我想大家在熟悉不过了,这是一个典型的异步操作。

应用场景,当我们通过ajax获取数据时,由于服务端问题而没有响应,这个时候可能会持续10秒以上,这个情况下,这个情况叫做响应超时,为了好看,通常我们需要抛出一个响应异常,这个时候Promise就派上用场了。

知识点:定时器,ajax,Promise...

var ajax = new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'lib/test.php');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    resolve(xhr.responseText);
                }
                setTimeout(function() {
                    reject(new Error('连接超时'));
                }, 2000);
            }
        });

        ajax.then(function(data) {
            console.log(data);
        }).catch(function(err) {
            if (err) throw err;
        })