当前位置：首页 > news >正文

promise的用法以及注意事项，看了这篇你就会了

news 2025/8/2 8:15:20

一，为什么要使用promise,ta能解决那些问题？

Promise 是异步编程的一种解决方案：从语法上讲，Promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会（resolve）给你一个结果。ta有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态),一旦状态有pending状态转为后两者之一就不可逆转，也就是说成功和失败之间是不可转换的。new一个promise之后，ta就是会立即执行。

【互联网行业信息差】全网自媒体：公@众@号，小@红@薯！打工太累，聊聊互联网趣事！

看代码：

let P = new Promise((resolve,reject) => {setTimeout(() => {resolve(1)}, 3000)
});
P.then(data => {console.log(data)
}, err => {})

说明：这里new了一个Promise,new Promise(execut);这里的execut会立即执行。p.then也会立即执行，这个then究竟做了什么呢？后面会说！

我们再来说一下在没有Promise之前，我们写代码经常遇到的一个问题（回调地狱）：

function fn(a,cb){setTimeout(() => {a = 10 * Math.random()cb(a)           //这里就是cb需要等待},300)
}function fn1(c){if(c>5){console.log(c)}else{console.log('值偏小')}
}fn(0,fn1)

有时候我们为了等待某个值需要嵌套很多层，这样为了解决这个问题Promise就应运而生了，Promise是用来解决以下几个问题的：

解决多层嵌套问题，也就是我们常说的回调地狱(then)；
解决多个异步请求问题（all,race）

我们来看看用promise怎么写上面的代码：

let p1 = new Promise((resolve, reject)=>{setTimeout(() => {a = 10 * Math.random()resolve(a)           //这里就是cb需要等待},300)
})p1.then(data => {fn1(data)
})

特别是多层嵌套的时候，Promise的好处将更加明显！

【互联网行业信息差】全网自媒体：公@众@号，小@红@薯！打工太累，聊聊互联网趣事！

二，下面跟着我一起学习一下Promise的常见用法吧！

Promise是一个构造函数，自己身上有reject,resolve,all,race这几个方法，原型上有then、catch等方法。

Promise的构造函数接收一个参数：函数(执行器，这个执行器是立即执行的)，并且这个函数需要传入两个参数：

resolve ：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数
你需要注意的是在Promise的执行器里面必须要有resolve,或者reject这两个回调函数执行。通过resolve或则reject来改变Promise的状态为成功或者失败，并且执行then里面的成功函数或者失败的函数。

【互联网行业信息差】全网自媒体：公@众@号，小@红@薯！打工太累，聊聊互联网趣事！

then 链式操作的用法

从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用传递状态的方式来使得回调函数队列能够及时调用，所以使用Promise的正确场景是这样的：

function fn1(c){if(c>5){console.log(c)}else{console.log('值偏小')}
}
let p1 = new Promise((resolve, reject)=>{setTimeout(() => {a = 10 * Math.random()resolve(a)           //这里就是cb需要等待},300)
})p1.then(data => {fn1(data)return data
})
.then((data) => {console.log(data)   //1.333
})
.then((data) => {console.log(data)   //undefined
})

这里顺带讲一下 then的传递：如果then里面的回调返回的是一个Promise，那么就将这个Promise的resolve的值传递给下一个then的data值，如果返回的是一个普通值，那么就将这个普通值传递给下一个then的data值，例如上面的结果。

reject的用法

将Promise的状态置为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。这里就不再详细叙述。

catch的用法

它是做什么用的呢？其实它和then的第二个参数一样，用来指定reject的回调。这里就不再详细叙述。

all的用法

let Promise1 = new Promise(function(resolve, reject){setTimeout(() => {resolve(1)},300)})
let Promise2 = new Promise(function(resolve, reject){setTimeout(() => {resolve(2)},200)
})
let Promise3 = new Promise(function(resolve, reject){setTimeout(() => {resolve(3)},100)
})let p = Promise.all([Promise1, Promise2, Promise3])p.then((data) => {console.log(data)    //[1,2,3]   这里的顺序和all的顺一样，和异步回调执行得到结果的顺序无关// 三个都成功则成功  
}, function(){// 只要有一个失败，则失败 
})

有了all，你就可以并行执行多个异步操作，并且在一个回调中处理所有的返回数据，是不是很方便！

【互联网行业信息差】全网自媒体：公@众@号，小@红@薯！打工太累，聊聊互联网趣事！

race的用法

let Promise1 = new Promise(function(resolve, reject){setTimeout(() => {resolve(1)},300)})
let Promise2 = new Promise(function(resolve, reject){setTimeout(() => {resolve(2)},200)
})
let Promise3 = new Promise(function(resolve, reject){setTimeout(() => {resolve(3)},100)
})let p = Promise.race([Promise1, Promise2, Promise3])p.then((data) => {console.log(data)// 三个都成功则成功  
}, function(){// 只要有失败，则失败 
})

以最先得到的结果为准，即使如果最先拿回来的是reject的结果，那么race就是reject的结果。

好了，promise的常见用法就这些，下一篇我们来聊聊promise的源码！

查看全文

http://www.lryc.cn/news/478841.html