初识Promise

2019-05-18

初识Promise

现在呢，我手上的一个项目有一个需求，打开页面需要先先后天获取一下当前的状态然后对页面进行更新，在让用户进行交互。有一些网络状态不太好的将会等很久才会刷新出新的状态，所以做一个加载动画就完全有必要呢。但是有一些用户的网络将会很快，加载动画根本完全没显示就一闪而过了。这样怎么能对得起我辛苦做好的动画呢。为了不影响我后面一长串的if(status){return false} 的顺利执行，我突然就想起来随时遇到但却没有深入进行研究的 Promise 这个方法啦

在JavaScript的世界中，所有代码都是单线程执行的。
由于这个“设计”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

function callback(){
    console.log('Done')
}
console.log('before')
setTimeout(callback,0)
console.log('after')

执行上面代码会输出

before
after
undefined
Done

算了不扯这么多，我直接来看ES5实现的优雅 Promise 方法把。
先来看看结构

new Promise((resolve, reject) => {
    ...
  if(status){
    resolve('true');
  }else{
    reject('false')
  }
}).then((res)=>{
    console.log(res)
}).catch((res)=>{
    console.log(res)
})

用发其实很简单，我们只需要new一个Promise函数并且配置好回调即可