zoukankan      html  css  js  c++  java
  • promise优化回调地狱

        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <script>
          const ID_BASE_URL = 'https://jsonplaceholder.typicode.com/todos'
          const ROBOT_IMG_BASE_URL = 'https://robohash.org'
          function getRobotId(num, callback) {
            $.get(`${ID_BASE_URL}/${num}`, (data) => {
              const id = data.id
              callback(id)
            })
          }
    
          function createBobot(id) {
            const img = document.createElement('img')
            img.src = ROBOT_IMG_BASE_URL + `/${id}?size=200x200`
            document.body.appendChild(img)
          }
    
          function getRobotIdPromise(num) {
            const promise = new Promise((res, rej) => {
              $.get(`${ID_BASE_URL}/${num}`, (data) => {
                const id = data.id
                res(id)
              })
            })
            return promise
          }
    
          getRobotIdPromise(1)
            .then((id) => {
              createBobot(id)
              return getRobotIdPromise(2)
            })
            .then((id) => {
              createBobot(id)
              return getRobotIdPromise(3)
            })
            .then((id) => {
              createBobot(id)
              return getRobotIdPromise(4)
            })
            .then((id) => {
              createBobot(id)
              return getRobotIdPromise(5)
            })
            .then((id) => {
              createBobot(id)
            })
    
          // 回调地狱
          // getRobotId(1, (id) => {
          //   createBobot(id)
          //   getRobotId(2, (id) => {
          //     createBobot(id)
          //     getRobotId(3, (id) => {
          //       createBobot(id)
          //       getRobotId(4, (id) => {
          //         createBobot(id)
          //         getRobotId(5, (id) => {
          //           createBobot(id)
          //         })
          //       })
          //     })
          //   })
          // })
        </script>
  • 相关阅读:
    数据泵导出 备份文件以日期时间命名
    执行计划的查看
    truncate 函数用法示例
    几个小知识点
    删除大表数据
    转 oracle 11g 导出空表
    数值转为财务大写
    oracle 取随机数据
    大表 update 方式
    >hibernate.cfg.xml的一些常用配置
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15172783.html
Copyright © 2011-2022 走看看