Promise入门学习

Posted 2021-06-29 十九万里

1、promise概述

Promise是ES6中原生的一个方法 代表着未来要发生的某件事情，在javascript中来说就是异步操作，所以在js中promise就是异步操作常见的一种方法，

异步操作常见方法：

1、callback回调函数
2、事件监听
3、promise
4、发布/订阅模式
5、async/await
6、generator链式调用

这里我们主要学习Promise

Promise主要的优点在于能把异步操作通过同步操作的流程表示出来，避免了异步的嵌套回调。产生回调地狱。

2、promise基本用法

promise对象是一个构造函数，基本语法如下：

var promise = new Promise (function (resolve,reject){
	if(success){
	resolve(value);
}else{
	reject(error);
}
});
promise.then(function(value) {
//success
},function(value)}
//failure
});

上面这个例子中有两个参数 resolve和reject
判断后使用then方法回调出对应的回调函数。
这个就是promise的基本用法

3、promise链式调用

链式调用时JQ中提出的概念。jq中的选择器就是链式操作：
eg：

• $(’#div’).css(‘background’,’#ccc’).removeClass(‘box’).stop().animate({width:300})
  链式调用就是把就是结果通过return this实现的，当某个函数执行完毕，在把执行的结果返回，这样其他的函数就能继续调用

这就是js中的链式调用

 function show(str) {
        console.log(str);
        return show;
    }
    show(123)(456)(789);

在promise中
then返回的对象就是promise的新对象

getJSON ("/posts.json").then(function(json){
	return json.post;
}).then(function(post){
//proceed
});

在上面的代码中 第一个then回调函数返回json.post作为第二个then回调函数的参数使用。
使用then的方法就能继续调用上一个回调函数返回的结果。

4、promise方法

catch
catch实际上是then（null,rejection）回调函数的别名，在发生错误时，会捕获错误并抛出。

getJSON ("/posts.json").then(function(json){
	//code 没有return出去
}).catch(function(error){
//因为前一个函数没有return出结果，所以没办法调用，导致出错
console.log("error!",error);
});

只要在then回调的过程中出现一个错误 就会被catch抛出。

all
promise.all方法顾名思义就是把多个then返回的对象，包装成为一个新的promise对象（前提是这些返回的对象都是正确没有错误的）

var promise = [2,3,4,5,6,7].map(function(id){
	return getJSON("/poost/" + id +".json");
});
promise.all(promises).then(function(posts){
//....
}).catch(function(reason){
//...
});

在这段代码中 使用all方法把上面返回的数组编程一个新的数组。

resolve
promise.resolve方法是把现有的对象转化成为Promise对象。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

5、promise的三种状态

pending：初始状态，不是成功或者失败；
fulfilled：成功状态；
rejected：失败状态；

在promise中，只有异步操作的结果，能够改变他的状态，其他的操作是无法去改变的，
一旦状态改变之后，就无法手动五更改这个状态，

6、async await和promise的区别

async是ES7中提出的概念，promise是ES6中概念
可以说async是优雅 promise只是实现承诺。

在promise提出后，在处理错误时不够完善，所以后面提出了
.catch和.finally来方便捕获错误。
然后又产生了 Generator
在ES7中。推出了async await 网上有许多说法 async是generator的语法糖
我认为同理 async也是promise的语法糖。是对promise的优化和升级

async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变

总结来说：
async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。返回的也是一个promise对象。解决的问题和达到的效果是差不多的，只是async的语法更简洁一些。

7、promise特点

1、promise构造函数会立即执行，promise.then 方法调用的代码会异步调用。
2、promise状态由pending变为fulfilled和rejected后就不能再改变
3.resolve方法和reject方法都会把promise状态改为完成。然后把得到的异步结果当做错误的参数返回。
4、promise的构造函数值调用一次，then和catch返回的对象可以被多次调用，如果返回的是结果，下次调用的时候后直接调用这个结果。

8、promise缺点

1、promise在被建立后就会立即执行，无法取消
2、promise内部的错误只有在设置回调函数是才会反应到外部，否则不会抛出
3、无法明确的判断promise在pending状态时进行到哪一个阶段，（开始还是完成）