异步与Promise

异步

如果能直接拿到结果

• 那就是同步
• 医院挂号，你需要拿到号才会离开窗口
• 没有拿到号，你不会离开

如果不能直接拿到结果

• 异步
• 定制餐具，可以在别人制作餐具的同时，去做其他事情
• 不需要停下来等待

异步列子

AJAX

• request.send()之后，并不能直接得到response
• 必须等到readyState变为4后，浏览器回头调用request.onreadystatechange函数
• 才能够获取request.response

回调callback

function f1(){}
function f2(fn){
  fn()
}
f2(f1)

f1是回调函数

异步和回调的关系

关联

• 异步任务需要在得到结果时通知js来拿到结果
• 可以让js写一个函数地址
• 异步任务完成时浏览器调用该函数地址即可
• 同时把结果作为参数传递给该函数
• 这个函数是写给浏览器调用的，所以是回调函数

区别

• 异步任务需要用到回调函数来通知结果
• 但回调函数不一定只用在异步任务里面
• 回调函数也可以用于同步任务

判读是否同步

• setTimeout
• AJAX
• AddEventListener

fn = function(value){
  console.log(value)
}
function f1(fn){
  setTimeout(
    () => {
     fn(Math.ceil(Math.random()*6)) 
    },
    1000
  )
}
f1(fn)

简化

fn = console.log
function f1(fn){
  setTimeout(
    () => {
     fn(Math.ceil(Math.random()*6)) 
    },
    1000
  )
}
f1(fn)

两个结果

ajax('get', '1.json', data=>{}, error=>{});
ajax('get', '1.json',
{
  success:()=>{},
  fail: () =>{}
}
)

不足

问题

• 不规范，名称不统一
• 容易出现回调地狱
• 很难处理错误

回调地狱

getUser(
  user=>{
    getInfor(
      user, (groups) => {
        //...
      }
    )
  }
)

解决回调问题

• 规范回调的名字或顺序
• 拒绝回调地狱，让代码可读性更强
• 方便地捕获错误

ajax = (method, url, options) => {
  const {success, fail} = options;
  const request = new XMLHttpRequest()
  request.open(method, url);
  request.onreadystatechange = () => {
    if(request.readyState === 4){
      if(request.status < 400) {
        success.call(null, request.response)
      } else if(request.status >= 400){
         fail.call(null, request, request.status)
      }
    }
  }
  request.send()
}

ajax(
  'get', '/xxx',
{
  success(response){console.log(1)},
  fail: (request, status) => {console.log(2)}
}
)

修改为promise

ajax = (method, url) => {
  return new Promise(
      (resolve, reject) => {
            const request = new XMLHttpRequest()
            request.open(method, url);
            request.onreadystatechange = () => {
            if(request.readyState === 4){
                if(request.status < 400) {
                  resolve.call(null, request.response)
                } else if(request.status >= 400){
                   reject.call(null, request)
                }
            }
          }
          request.send()
      }
  )

}
ajax('get', '/xxx').then(
  (response) => {console.log(1)}, (request) => {console.log(2)}
)

小结

第一步

• return new Promise((resolve, reject) => {})
• 任务成功调用resolve(result)
• 任务失败调用reject(error)
• resolve 和 reject会再去调用成功和失败函数

第二步

• 使用.then(success, fail)传入成功和失败函数