Promise的三种链式调用

第一种写法(基础写法)

话不多说直接上代码

<script>

    //网络请求:aaa -> 对代码进行自己的处理

    // 处理一:在aaa后面接上bbb -> aaabbb -> 对代码再次进行处理

    // 处理二:将上一次的结果aaabbb后面加上ccc -> aaabbbccc -> 继续对代码进行下一步的处理

    new Promise((resolve, reject) => {

      setTimeout(() => {

        resolve('aaa')

      },1000)

    }).then(res => {

      //1.自己处理10行代码

      console.log(res, '第一层的10行处理代码');

      //2.对结果进行第一次处理

      return new Promise((resolve ,reject) => {

        resolve(res + 'bbb')

      })

    }).then(res => {

      console.log(res, '第二层的十行代码');

      return new Promise((resolve) => {

       //这个地方Promise里面的两个参数可以只写一个,reject是可以选的

        resolve(res + 'ccc')

      })

    }).then(res => {

      console.log(res, '第三层的世行处理代码');

    })

</script>


第二种promise的简写方法

<script>

    new Promise((resolve) => {

      setTimeout(() => {

        resolve('aaa')

      },1000)

    }).then(res => {

      //1.自己处理10行代码

      console.log(res, '第一层的10行处理代码');

      //2.对结果进行第一次处理

      return Promise.resolve(res + 'bbb')

    }).then(res => {

      console.log(res, '第二层的十行代码');

      //第三种简写

      return Promise.resolve(res + 'ccc')

    }).then(res => {

      console.log(res, '第三层的世行处理代码');

    })

</script>

只是将

return new Promise((resolve ,reject) => {

        resolve(res + 'bbb')

})

这个代码替换成了return Promise.resolve(res + 'bbb')。

Promise最最最简介的写法来了

在第二中简写的写法上在进行简写,省略掉Promise.resolve。

将return Promise.resolve(res + 'bbb') => return res + 'bbb'

因为内部Promise会对return进行一个识别,然后进行包装。

具体代码我就不写了,只是在第二种简写的基础上进行一点点的修改。


总结一下:Promise的两种简写方案都基于第一种基础方案的写法,第一种基础方案懂了原理,后面两种方案也很容易理解。个人觉得代码主要是看原理,而不是代码量,等原理弄清楚了,对代码进行一步一步的修改,完善,减少书写不必要的代码。

以上内容我是在b站上一个叫ilovecoding的up主上传的vue视频学习中学到了,如果有什么不动可以私聊我,也可以去b站搜索这个老师的呦!感谢您的观看。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Promise学习(上): 资料: JavaScript Promise迷你书 原著:azu / 翻译:liubi...
    你隔壁的陌生人阅读 580评论 0 1
  • 前言 本文旨在简单讲解一下javascript中的Promise对象的概念,特性与简单的使用方法。并在文末会附上一...
    _暮雨清秋_阅读 2,226评论 0 3
  • 在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise,因为Promise的出现,很轻松的就给开...
    嘿_那个谁阅读 3,679评论 2 3
  • promise是什么? 1、主要用于异步计算 2、可以将异步操作队列化,按照期望的顺序执行,返回符合预期的结果 3...
    师妹不叫思妹阅读 802评论 0 0
  • //本文内容起初摘抄于 阮一峰 作者的译文,用于记录和学习,建议观者移步于原文 概念: 所谓的Promise,...
    曾经过往阅读 1,251评论 0 7