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>
  • 相关阅读:
    我理解的BFC
    框架设计—选择器模块
    eval 的使用与延展
    Git学习笔记
    CSS3选择器学习笔记
    JavaScript继承学习笔记
    JavaScript原型与原型链学习笔记
    javascript面向对象编程笔记
    GitHub图形界面使用笔记
    HTML5表单学习笔记
  • 原文地址:https://www.cnblogs.com/wuqilang/p/15172783.html
Copyright © 2011-2022 走看看