前端Promise实现（一） | 传统的ES5的回调写法

传统的ES5的回调写法

function foo(url) {
  let res = null

  setTimeout(() => { // 模拟网络请求
    if(url === 'hello')
      res = "成功！"
    else
      res = '失败！'
  }, 2000)
  
  return res
}

let res = foo('hello')
console.log(res) // null

• 这样是拿不到结果的，只能拿到null，因为JS的对于任务的优先级是不同的
• 对于定时器，网络请求，IO等耗时操作被JS定义为异步任务
• 同一个模块中，或者是说同一个执行周期中，
• 所有的异步任务都是晚于同步任务的，和代码的编写顺序无关

=

• 传统的ES5的回调写法
• 要改变原有的方法功能的逻辑，另外的增加传入回调函数参数

function bar(url, success, fail) {
  setTimeout(() => { // 模拟网络请求
    if(url === 'hello'){
      success()
    }
    else{
      fail()
    }
  }, 2000)
}

function success() { // 当异步任务成功了之后，成功的处理逻辑
  console.log('success')
}

function fail() { // 当异步任务失败了之后，失败的处理逻辑
  console.log('fail')
}

bar('hello',success, fail)

=

• 调用函数，将成功的回调和失败的回调传入
• 简单看起来这样的写法没有问题，但是当success，fail函数非常的庞大
• 或者还需要调用成功/失败的时候还需要调用其他的处理函数时，
• 如果还有其他的处理逻辑，如果还有其他的异步任务，就形成了一个回调地狱
• 每一个逻辑都可能是数十上百行的代码，还要考虑是不是异步任务，极易出错。