promise对象

前言

• 学习自bili-尚硅谷-promise
• 案例已提交到gitlab
• promise是为了解决回调地狱问题

入门

• 案例一

<script>
  btn.addEventListener("click", function(){
        // promise对象是一个构造函数，接收一个函数类型的参数，封装异步操作
        const p = new Promise((resole, reject) => {
            setTimeout(()=>{
                let n = rand(1, 100);
                if(n<=30){
                    resole(n); // 执行成功的函数，传入参数
                }else{
                    reject(n); // 执行失败的函数
                }
            }, 100);
        });
        // 执行回调
        p.then((value)=>{  // resole函数，value是形参
            alert("成功！" + value);
        },(reason)=>{
            alert("失败！" + reason);
        })
    })
</script>
 

• 案例二

<script>
    function sendAjax(url){
        return new Promise((resolve, reject) => {  // Promise函数包裹一个异步操作
            const xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    resolve(xhr.response);  // 成功时的回调
                }else{
                    reject(xhr.status);
                }
            }
        })
    }
    // 执行回调
    sendAjax('http://localhost:8080/test')
    .then(value => {
        console.log(value);
    }, reason => {
        console.warn(reason);
    })
</script>

promise对象的状态

• pending 未决定
• resolved 成功
• rejected 失败

PromiseResult

• 用于保存异步任务的结果（成功或失败）
• 只有resolve函数、reject函数可以改变该结果

catch

<!-- 只有失败时才调用catch -->
<script>
    let p = new Promise((resolve, reject) =>{
        reject('error');
    })
 
    // 执行回调
    p.catch(reason => {
        console.log(reason)
    })
</script>
 

resolve

<!-- resolve 方法 ，属于promise函数对象，不属于promise实例对象-->
<script>
    // 在promise对象的resolve方法中传入参数，这个参数是非promise类型的对象，则返回的promise对象状态为成功，结果为传入的参数
    let p1 = Promise.resolve(123);
    // 传入一个promise类型的对象，则参数的结果决定resolve方法的结果
    let p2 = Promise.resolve(new Promise((resolve, reject) =>{
        reject('error');
    }))
 
    p2.catch(reason => {
        console.log(reason);
    })
</script>
 

reject

<!-- promise函数的reject方法 ，传入任何参数返回的状态都是失败 -->
<script>
    let p = Promise.reject(123);
    let p1 = Promise.reject('asd');
    // 即使传入一个成功的promise对象，返回的状态依然是失败，返回的结果是传入的promise对象
    let p2 = Promise.reject(new Promise((resolve, reject) => {
        resolve(123);
    }));
</script>
 

all、race

<script>
    let p1 = new Promise((resolve, reject) => {
        resolve('ok');
    })
    let p2 = Promise.reject('error');
    let p3 = Promise.resolve('hi');
    // promise函数的all方法中传入一个数组，数组中是多个promise对象
    // 当数组中所有promise对象都为成功时，all方法才返回成功
    // 当数组中有一个promise对象为失败结果，all方法返回失败状态，返回的失败结果为数组中失败的结果
    const result = Promise.all([p1, p2, p3]);
    console.log(result)
 
    // Promise函数中race方法中传入一个数组，数组中最先改变状态的promise对象，
    // 作为该方法返回的promise对象的最终状态
    const result1 = Promise.race([p1, p2, p3]);
    console.log(result1)
</script>
 

创建对象

  var promise = new Promise(function(resolve, reject) {
      // ...
      resole(n); // 执行成功的函数，传入参数
        
      reject(n); // 执行失败的函数
 
  });
 
  // 执行回调
  p.then((value)=>{  // resole函数，value是形参
    // ...成功状态时的操作
  },(reason)=>{
    // ...失败状态时的操作
  })
 

让某个函数拥有promise功能，只需返回该对象

  function myFunction(url) {
    return new Promise((resolve, reject) => {
      // ...
      resole(n); // 执行成功的函数，传入参数
        
      reject(n); // 执行失败的函数
 
    });
  };
 
  // 执行回调
  myFunction('http://localhost:8080/test')
  .then(value => {
      // ...成功状态时的操作
  }, reason => {
      // ...失败状态时的操作
  })