Promise

169 阅读2分钟

promise是什么?

1、主要用于异步计算

2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果

3、可以在对象之间传递和操作promise,帮助我们处理队列

异步操作的常见语法

  1. 事件监听
document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 响应事件,进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)
  1. 回调
// 比较常见的有ajax
$.ajax('http://www.wyunfei.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

// 或者在页面加载完毕后回调
$(function() {
 // 页面结构加载完成,做回调逻辑处理
})

promise详解

代码实例

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

Promise参数(resolve,reject)

resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去; reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise状态

promise有三个状态:

1、pending[待定]初始状态

2、fulfilled[实现]操作成功

3、rejected[被否决]操作失败

当promise状态发生改变,就会触发then()里的响应函数处理后续步骤; promise状态一经改变,不会再变。 Promise对象的状态改变,只有两种可能: 从pending变为fulfilled 从pending变为rejected。 这两种情况只要发生,状态就凝固了,不会再变了。

.then()

1、接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)

2、.then()返回一个新的Promise实例,所以它可以链式调用

3、当前面的Promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行

4、状态响应函数可以返回新的promise,或其他值,不返回值也可以我们可以认为它返回了一个null;

5、如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行

6、如果返回其他任何值,则会立即执行下一级.then()

Promise.all() 批量执行

Promise.all([p1, p2, p3])用于将多个promise实例,包装成一个新的Promise实例,返回的实例就是普通的promise, 它接收一个数组作为参数, 数组里可以是Promise对象,也可以是别的值,只有Promise会等待状态改变

当所有的子Promise都完成,该Promise完成,返回值是全部值得数组, 有任何一个失败,该Promise失败,返回值是第一个失败的子Promise结果