美文网首页
promise&&acync/await

promise&&acync/await

作者: 谷子多 | 来源:发表于2018-07-30 04:33 被阅读0次

基本语法

  let p = new Promise((resolve,reject)=>{
    resolve('sucess')
  })

  p.then(result=>{
     console.log(result)
  })

特点:

屏幕快照 2018-07-15 上午6.24.40.png

Promise.protyte.then&&链式调用

执行之后返回一个Promise对象。

           let p = new Promise((resolve,reject)=>{
                resolve('sucess')
            })

            let resolveP = p.then(result=>{
                console.log(result)
                return 123
            })

            resolveP.then(result=>{
                // 如果resolveP没有设置返回结果,就会返回undefined,否则返回return结果
                console.log(result)

            })
            //console.log(resolveP)
        </Script>
屏幕快照 2018-07-15 上午6.34.32.png

Promise.protptype.catch:默认返回Promise值

屏幕快照 2018-07-15 上午6.55.45.png
            let p = new Promise((resolve,reject)=>{
                reject('失败了!')
            })

            let resolveP = p.catch(result=>{
                console.log(result)
            })

Promise.resolve():将现有对象转为promise对象的快捷方法

屏幕快照 2018-07-15 上午7.13.06.png

Promise.reject()

屏幕快照 2018-07-15 上午7.18.13.png

Promise.all()

将多个promise对象合并成一个。
参数:数组,数组项为promise对象

屏幕快照 2018-07-15 上午7.21.14.png
成功:返回数组,结果是数组项
屏幕快照 2018-07-15 上午7.27.29.png
失败:只要有一个reject,返回reject的值。
应用场景:请求多个异步数据
屏幕快照 2018-07-15 上午7.38.02.png

Promise.race()

类似赛跑的概念,多个promise,只要有一个先成功,就会返回成功的promise对象,反之亦然


屏幕快照 2018-07-15 上午7.42.40.png

错误处理

Promise内部的错误外部捕捉不到,必须是通过catch捕捉!!!


屏幕快照 2018-07-15 上午7.51.10.png

Async-Await

屏幕快照 2018-07-15 上午8.47.46.png
屏幕快照 2018-07-15 上午8.48.50.png
屏幕快照 2018-07-15 上午8.49.53.png
           async function demo(params) {
                
            }
            let p = demo()
            console.log(p) // 结果是一个promise对象
屏幕快照 2018-07-16 上午3.27.30.png
屏幕快照 2018-07-16 上午3.29.02.png
屏幕快照 2018-07-16 上午3.30.14.png

案例:发送三个请求,第三个依赖第二个请求结果,第二个依赖第一个。

        function sleep(wait){
            return new Promise((res,rej) => {
                setTimeout(()=>{
                    res(wait)
                },wait)
            })
        }

        async function demo(){
            let result1 = await sleep(100)
            let result2 = await sleep(result1+100)
            let result3 = await sleep(result2+100)
// 此处返回的是一个promise对象
            return result3
        }

        demo.then(result=>{
            console.log(result)
        })

相关文章

  • promise&&acync/await

    基本语法 特点: Promise.protyte.then&&链式调用 执行之后返回一个Promise对象。 Pr...

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • vue for 循环中使用 await

    vue for 循环中使用 await(转) await 和 async必须成对出现,如果调用await的地方,无...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • 小程序-云开发

    async和await async:异步(无等待)await:等待(是为了同步) 一、await 关键字只在 as...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • 理解async/await

    async/await:用同步的思维解决异步问题,等待await执行结果出来之后,才会继续向下执行 await 1...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • 学习asyncio

    关键字await将控制权移交给event loop。 一、await关键字 二、async和await的语法 三、...

网友评论

      本文标题:promise&&acync/await

      本文链接:https://www.haomeiwen.com/subject/uyiupftx.html