【一分钟学JavaScript】Promise最精简入门

网上的教程很多都是写得非常混乱，有些写得太过于复杂，很难理解。因此最近会写一些很简单的入门篇。

Promise是什么

Promise用于表示一个异步操作的最终状态，以及异步操作的结果值。

Promise的状态有三个:

• pending: 初始状态
• fulfilled：操作成功完成
• rejected：操作失败

使用

Promise分为声明和使用两个部分：

声明

new Promise(function(resolve,rejcect){
    resolve(args);//reject(args);
}
复制代码

其中resolve和reject均为function参数，resolve表示操作成功完成调用的函数，而reject则是操作失败调用的函数。由于最终状态只能有一个，不是成功就是失败，因为resolve和reject必须只能执行一个。

使用

promise.then(
    //操作成功
    function(args){
    
    },
    //操作失败
    function(args){
        
    }
}
复制代码

args分别对应resolve或者reject传递过来的值。

示例

function promise(){
  return new Promise((resolve,reject)=>{
    var randon=Math.random();
    if(randon>0.5){
      resolve('成功');
    }else{
      reject('失败');
    }
  })
}
promise().then((data)=>{
  console.log('resolved: ' + data);
},(err)=>{
  console.log('rejected: ' + err);
})
复制代码

这个例子是生成随机数，如果大于0.5则操作成功，否则失败。

上面的例子是为了解释怎么用，下面会以实际中会使用到的情况：加载一张图片，如果成功，则显示在网页上，否则提醒加载失败。

function loadImg(url){
  return new Promise((resolve,reject)=>{
    var image=new Image();
    image.src=url;
    image.onload=()=>{
      resolve('loaded');
    }
    image.onerror=()=>{
      reject('error');
    }
  })
}
let url='https://images.unsplash.com/photo-1560178783-75a464fbdf6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=566&q=80';
loadImg(url).then(()=>{
  var img=document.createElement('img');
  img.setAttribute('src',url);
  document.body.appendChild(img);
  console.log('loaded')
},()=>{
  alert('loading failed!')
})
复制代码

demo地址：(playcode.io/338247)

同步

function A(){
	setTimeout(console.log('A!'),3000);
}
function B(){
setTimeout(console.log('B!'),2000);
}
function C(){
setTimeout(console.log('C!'),1000);
}
function onRejected(err){
	console.log('rejected');
}
function finalTask(){
	console.log('Final');
}
var promise=Promise.resolve();
promise.then(A)
    .then(B)
    .then(C)
    .catch(onRejected)
    .then(finalTask);
复制代码

执行结果：

A!
B!
C!
复制代码

转载于:https://juejin.im/post/5cff6524e51d45599e019d95