初级了解Promise

109 阅读2分钟

首先,异步是什么?

同步定义:直接拿到结果的

异步:如果 JS 不能直接拿到一个函数的结果,可以先去执行别的代码,等结果到了再取结果,这就是异步

  1. 异步的结果可以通过轮询获取,轮询就是定时去询问结果拿到了没有
  2. 异步的结果可以通过回调获取,一般来说结果会被作为回调的第一个参数
  3. 异步的好处是可以把用来等待的时间拿去做别的事情

7f81324f20bc29b9f0efcd18b57b3c9.jpg

异步为什么要用到回调?

回调定义:你写给别人调用的函数就是回调

22ef81bfe6ea2b6cbe4ba6396c5c480.jpg

dfc4786ac78c40bdf1d29995d677dcb.jpg

异步为什么要用到回调:

  • 异步任务不能拿到结果
  • 于是我们传一个回调给异步任务
  • 异步任务完成时调用回调
  • 调用的时候把结果作为参数

回调的三个问题

  • 规范不了回调的名字或顺序
  • 容易出现回调地狱,让代码可读性强
  • 很难捕获错误

为了解决回调的三个问题,于是前端结合Promise和JS,制定了Promise/A+规范,该规范详细描述了Promise的原理和使用方法

Promise

一种设计模式

1e9a84249ba5a79e9170a336bea625e.jpg

34726a31d6dd000a11ade835c88ad6d.jpg

那么请问如何得到这个含有.then()的对象呢?

0a582313645482643ac72c44b6848b3.jpg 2b612d2b7a74ebf8bb5ee6c9219d4f1.jpg

return new Promise((resolve, reject)=>{...})

image.png 关于 return new Promise((resolve, reject)=>{...}) 中的 resolve 和 reject

  1. resolve 和 reject 可以改成任何其他名字,不影响使用,但一般就叫这两个名字
  2. 任务成功的时候调用 resolve,失败的时候调用 reject
  3. resolve 和 reject 都只接受一个参数
  4. resolve 和 reject 并不是 .then(succes, fail) 里面的 success 和 fail,resolve 会去调用 success,reject 会去调用 fail

ee7eab3c664b74201588265e463c79f.jpg

总结:

  1. Promise 不是前端发明的
  2. Promise 是目前前端解决异步问题的统一方案
  3. window.Promise 是一个全局函数,可以用来构造 Promise 对象
  4. 使用 return new Promise((resolve, reject)=> {}) 就可以构造一个 Promise 对象
  5. 构造出来的 Promise 对象含有一个 .then() 函数属性

Promise问答题,你需要参考MDN Promise - JavaScript | MDN (mozilla.org)

画外:关于 axios

  1. 这是一个专门用于操作 AJAX 的库
  2. axios.get('/xxx') 返回一个 Promise 对象
  3. axios.get('/xxx').then(s, f) 在请求成功的时候调用 s,失败的使用调用 f

后续再写一栏介绍 axios