promise 的使用方法
promise 简介
是异步编程的一种解决方案. 从语法上说, Promise 是一个对象, 从它可以获取异步操作的消息. 解决回调函数嵌套过多的情况
- const promise =new Promise(function(resolve,reject){
- setTimeout(function(){
- resolve('执行成功')
- },3000)
- })
- promise.then(res=>{
- console.log(res)
- }).catch(err=>{
- console.log(err)
- })
- console.log(111)
等待三秒后输出 '执行成功', 也就是说当异步操作完成, 即执行 resolve 或者 reject 之后, 才会执行 then 中的操作
其他用法
promise.all([])
所有请求都完成时再执行后续操作
- var p1 = Promise.resolve(3);
- var p2 = 1337;
- var p3 = new Promise((resolve, reject) => {
- setTimeout(resolve, 100, 'foo');
- });
- Promise.all([p1, p2, p3]).then(values => {
- console.log(values); // [3, 1337, "foo"]
- });
- promise.race([])
那个请求先执行完成就返回那个请求结果, 这个可以把一个请求与 setTimeout 对比, 实现请求超时的效果
- var p1 = new Promise(function(resolve, reject) {
- setTimeout(resolve, 500, "one");
- });
- var p2 = new Promise(function(resolve, reject) {
- setTimeout(resolve, 100, "two");
- });
- Promise.race([p1, p2]).then(function(value) {
- console.log(value); // "two"
- // 两个都完成, 但 p2 更快
- });
async 与 await
模拟一下经常出现的问题
- function getData(){
- return new Promise(function(resolve,reject){
- setTimeout(function(){ // 模拟一下请求
- resolve('执行成功')
- },3000)
- })
- }
- function main(){
- let data=''
- getData().then(res=>{
- data=res
- })
- console.log(data)
- console.log('操作完成')
- setInterval(()=>{
- console.log(data)
- },1000)
- }
- main()
运行结果:
可以看到第一个 console.log(data) 的结果为空, 这不难解释, 因为 main 函数内容顺序执行, 当 getData() 的时候异步操作还未完成, 所以继续执行下面的操作. 当第三秒的时候才执行 resolve() 并且成功输出 data, 这也对应了上面 promise 所说的'执行 resolve 或者 reject 之后, 才会执行 then 中的操作'既然这样事情就简单了, 一直等待请求完成不就完事了.
这里更改 main 函数为
- async function main() {
- // var data = await getData()// 或者
- let data
- await getData().then((res)=>{
- data=res
- })
- console.log(data)
- console.log('操作完成')
- }
输出结果:
来源: https://www.cnblogs.com/genhao7/p/12634247.html