前端
一点也不简单

解析Promise的奥秘

什么是 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;
        })

上面代码中,倘若2秒内获取不到数据会在控制台抛出连接超时异常,取到了就打印出数据。

Promise是用于异步操作的,在面试题里也经常会出现,所以大家可以继续深入去学习。

学习入口:阮一峰博客-Promise

赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » 解析Promise的奥秘

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏