vue promise

最新推荐文章于 2024-08-14 20:35:28 发布

qq_46099425

最新推荐文章于 2024-08-14 20:35:28 发布

阅读量777

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_46099425/article/details/124304698

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Promise作为异步编程解决方案的基本概念和使用场景，特别是针对网络请求的处理。通过示例展示了Promise的创建、解决（resolve）和拒绝（reject）过程，以及错误处理。此外，还探讨了如何通过Promise.all处理多个并发的Promise请求，并解释了Promise.resolve和Promise.reject的用法。

摘要由CSDN通过智能技术生成

1.Promise 是异步编程的一种解决方案

那什么时候我们会来处理异步事件呢？

一种很常见的场景应该就是网络请求了。

我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。

所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。

如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦

2.promise的使用

/什么情况下用到promise
    // 一般情况下是有异步操作的时候,使用Promise对这个异步操作进行封装
new Promise((resolve,reject)=>{
setTimeout(()=>{
    //成功的时候调用  处理代码在then

   //resolve('liu')
    //失败的时候调用reject
    //处理代码在catch
    reject('error message')
},1000)

    }).then((data)=>{
    console.log(data);

    }).catch((err)=>{
    console.log(err)

    })

 new Promise((resolve ,reject)=>{
    setTimeout(()=>{
        resolve('aaa')
    },1000)
}).then((res)=>{
    console.log(res);
  //  1  return  Promise.reject('error messsage')
     //2
      throw 'error message33'
     //直接执行最后的catch模块

}).then(res=>{
    console.log(res);
    return new Promise(resolve=>{
        resolve(res+'2222')
    })
}).then(res=>{

    console.log(res);
}).catch((err)=>{
     console.log(err+"11111111");
 })

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()

函数 Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

也可以return Promise.resovle(data)改成了return data

5.当有多个promose请求的时候

可以使用promise.all

 Promise.all([
new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve({name:'why',age:22})
    },2000)
}),new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve({name:'why',age:21})
    },2000)
})
 ]).then(res=>{
     console.log(res);
 })

会返回两个对象