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