探索Promise的应用

简介: 探索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是用于异步操作的,在面试题里也经常会出现,所以大家可以继续深入去学习。

相关文章
|
5月前
|
前端开发 JavaScript 开发者
前端开发中的异步编程:Promise 和 Async/Await 的比较与应用
在现代前端开发中,异步编程是不可或缺的技术。本文将深入探讨Promise和Async/Await这两种主流的异步编程方式,分析它们的优劣势及在实际项目中的应用场景。通过比较它们的语法、可读性和错误处理机制,帮助开发者更好地选择和理解如何在项目中高效地利用这些技术。
|
前端开发 小程序 JavaScript
promise 应用
promise 应用
58 0
|
6月前
|
前端开发
Promise 和 Async/await 在实际开发中的应用场景
Promise 和 Async/await 在实际开发中的应用场景
|
6月前
|
前端开发 NoSQL Serverless
Serverless 应用引擎操作报错合集之阿里函数计算中,出现"Unhandled promise rejection"的错误如何解决
Serverless 应用引擎(SAE)是阿里云提供的Serverless PaaS平台,支持Spring Cloud、Dubbo、HSF等主流微服务框架,简化应用的部署、运维和弹性伸缩。在使用SAE过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
|
6月前
|
前端开发 JavaScript
JavaScript 中的异步编程:Promise 和 Async/Await 的实现与应用
在Web开发中,JavaScript异步编程是一个不可忽视的重要话题。本文将深入探讨JavaScript中Promise和Async/Await的实现原理与应用场景,通过实例代码带您了解如何优雅地处理异步操作,提升代码的可读性和可维护性。
|
6月前
|
前端开发 JavaScript
JavaScript中的异步编程及Promise的应用
在前端开发中,异步编程是常见的需求,而Promise作为一种解决异步操作的技术,具有很高的应用价值。本文将介绍JavaScript中的异步编程原理,并结合实际案例详细讲解Promise的使用方法及其在前端开发中的应用。
38 2
|
6月前
|
前端开发 JavaScript API
JavaScript中的异步编程及Promise应用
在现代Web开发中,JavaScript的异步编程已经成为了一个重要的话题。本文将介绍JavaScript中的异步编程模式,以及通过Promise对象来简化异步操作的方法。通过深入理解并掌握JavaScript中的异步编程,可以提高代码的可读性和可维护性,从而更好地应对复杂的业务逻辑。
28 2
|
6月前
|
前端开发 JavaScript
JavaScript中的异步编程及Promise应用
在现代Web开发中,JavaScript的异步编程已经成为不可或缺的一部分。本文将介绍JavaScript中的异步编程概念,探讨回调地狱问题,并详细介绍Promise作为一种更优雅的解决方案。通过示例代码和实际场景应用,帮助读者更好地理解和应用Promise来处理异步操作。
|
12月前
|
前端开发 JavaScript 开发者
什么是promise?如何使用?应用场景?
什么是promise?如何使用?应用场景?
92 0
|
前端开发 API
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用
使用 RxJs Observable 来避免 Angular 应用中的 Promise 使用