2020-04-28

Js之Promise

promise是什么？

promise是一个对象，对象和函数的区别就是对象可以保存状态，有3个状态分别是：等待态（默认）成功态失败态，函数不可以（闭包除外）
并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
代码风格，容易理解，便于维护
多个异步等待合并便于解决

ES6 原生提供了 Promise 对象。

promise 之前如何异步操作

1. 事件监听

document.getElementById('#start').addEventListener('click', start, false);
function start() {
  // 响应事件，进行相应的操作
}
// jquery on 监听
$('#start').on('click', start)

2. 回调

// 比较常见的有ajax
$.ajax('http://www.wysite.com/', {
 success (res) {
   // 这里可以监听res返回的数据做回调逻辑的处理
 }
})

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

异步回调的问题：

之前处理异步是通过纯粹的回调函数的形式进行处理
很容易进入到回调地狱中，剥夺了函数return的能力
问题可以解决，但是难以读懂，维护困难
稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护

promise 如何异步操作

使用回调函数存在的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切。

每个promise实例都有一个.then方法。resolve（成功）,reject（失败）。
resolve,reject是自己定义的，你需要他成功或者失败，要先调用的是谁？一旦成功了就不能失败；如果你手动抛出一个异常那就注定会进失败的结果了；

let  promise = new Promise((resolve,reject) => {
   //耗时异步操作
   resolve('成功'); reject('失败');
}).then(data =>{    //成功
    console.log(data)
},err =>{   //失败
    console.log('err',err)
});
//成功

其中：

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise api

romise.resolve()
Promise.reject()
Promise.prototype.then()
Promise.prototype.catch()
Promise.all() // 所有的完成

1	var p = Promise.all([p1,p2,p3]);

Promise.race() // 竞速，完成一个即可

参考

本文标题:Js之Promise

文章作者:Sogrey

发布时间:2020-04-28, 10:14:21

最后更新:2022-12-29, 23:48:19

原始链接:https://sogrey.github.io/article/Js%E4%B9%8BPromise/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。