什么是promise?
Promise 是一个异步操作返回的对象,用来传递异步操作的消息。可以将异步操作以同步的流程写出来,常用于解决回调地狱。
回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
Promise通过.then().then()的同步形式解决回调套回调的繁琐写法
Promise用法
Promise是一个构造函数,自己身上有all、reject、resolve等方法,原型上有then、catch等方法
通过new一个Promise创建一个实例。必须传入一个函数,函数有参数reject、resolve。来改变成功或失败的状态。
然后可以调用实例的.then , .catch方法来处理成功或失败状态的回调
示例:
代码语言:javascript复制1 function test() {
2 const pro = new Promise((resolve, reject) => {
3 setTimeout(() => {
4 console.log("异步请求成功");
5 // resolve("成功了")
6 reject("失败")
7 }, 3000)
8 })
9
10 return pro
11 }
12
13 test().then(res => {
14 console.log(res);//成功了
15 return "第二次成功"
16 }).then(res => {
17 console.log(res);//第二次成功
18 }).catch(res => {
19 console.log(res);
20 })
21
Promise是同步还是异步
Promise本身是同步,then( ) , catch( )方法是异步
<div style="color:#005bb7;font-size:20px;font-weight:bold;" id="Promise.then ">「 Promise.then 」</div><hr style="margin:5px 0;opacity:0.5"> Promise.then 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。解决回调地狱嵌套问题。 return可传递给下一个.then一个参数。
代码语言:javascript复制1(Promise实例)
2.then(function(json) {
3 return json.post;
4})
5.then(function(post) {
6 // proceed
7});
Promise.catch
代码语言:javascript复制1(Promise实例).then(function(posts) {
2 // some code
3}).catch(function(error) {
4 // 处理前一个回调函数运行时发生的错误
5 console.log("发生错误!", error);
6});
7
Promise.all
.all方法用于将多个promise同时执行,完毕后返回一个结果数组。
.all方法接收一个数组,数组每一项都是promise实例。
如果所有实例都成功,就会跳入.then方法,返回值是也是一个数组,每一项是每个promise.then的返回值。
如果其中有一个失败,就会跳入.catch方法,返回的就是失败的那个结果
代码语言:javascript复制1 function test(val) {
2 const pro = new Promise((resolve, reject) => {
3 setTimeout(() => {
4 resolve(val)
5 }, 3000)
6 })
7
8 return pro
9 }
10
11 const p1 = test("成功1")
12 const p2 = test("成功2")
13
14 Promise.all([p1, p2]).then(res => console.log(res))//["成功1", "成功2"]
Promise.race
.race方法同样接收一个数组,每一项都是promise实例。然后这些实例开始赛跑,哪个最先执行完返回哪一个的结果
Promise.resolve
将一个普通对象转化为promise对象,并且状态直接是成功
代码语言:javascript复制1Promise.resolve("foo")
2// 等价于
3new Promise(resolve => resolve("foo"))
4
Promise.reject
将一个普通对象转化为promise对象,并且状态直接是失败
代码语言:javascript复制1Promise.reject("foo")
2// 等价于
3new Promise((resolve,reject) => reject("foo"))
4