promise 解决的那些异步问题

108 阅读1分钟

1 通过回调的方式来处理异步返回的结果

function getApi() { //}

setTtimeout(() => {
    
    getApi() // 模拟异步操作
})

这样的问题会是, 我有多个异步操作 我该怎么去处理, 请求成功和失败该怎么返回, 成功和失败的回调分别叫什么名字

ajax = (method, url, options)=>{
  const {success, fail} = options // 析构赋值,别再问
  const request = new XMLHttpRequest()
  request.open(method, url)
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      // 成功就调用 success,失败就调用 fail
      if(request.status < 400){
        success.call(null, request.response)
      }else if(request.status >= 400){
        fail.call(null, request, request.status)
      }
    }
  }
  request.send()
}

假设我们对于异步操作使用上面的代码去处理, 那么 成功和失败暂定为 successfail, 其实这样不是很规范, A 同学 可能是这样, B 同学 有可能定义为 doneunsuccess, 这样就不是很一致, 要如何解决一致, 就需要使用 promise

2 使用 propmise 来处理

promise 在大部分人的认知里面是一种前端的技术, 其实严格来说, propmise是一种设计模式, 它是1976 年的诞生一种设计模式, 使用这个设计模式来解决异步问题

ajax = (method, url, options)=>{
  return new Promise((resolve, reject)=>{
    const {success, fail} = options
    const request = new XMLHttpRequest()
    request.open(method, url)
    request.onreadystatechange = ()=>{
      if(request.readyState === 4){
        // 成功就调用 resolve,失败就调用 reject
        if(request.status < 400){
          resolve.call(null, request.response)
        }else if(request.status >= 400){
          reject.call(null, request)
        }
      }
    }
    request.send()
  })
}

3 promise 代替 回调来处理异步 有哪些好处或者说是优点呢

1.规范回调的名字或顺序
2.拒绝回调地狱,让代码可读性更强
3.很方便地捕获错误