飲冰三年-人工智慧-Vue-70 Promise

阿新 • • 發佈：2021-06-27

上一篇飲冰三年-人工智慧-Vue-69 路由

五、Promise

1、認識Promise

Promise到底是做什麼的呢？

Promise是ES6中一個非常重要和好用的特性，是非同步程式設計的一種解決方案。

我們來考慮下面的場景(有誇張的成分)：

我們需要通過一個url1從伺服器載入一個數據data1，data1中包含了下一個請求的url2
我們需要通過data1取出url2，從伺服器載入資料data2，data2中包含了下一個請求的url3
我們需要通過data2取出url3，從伺服器載入資料data3，data3中包含了下一個請求的url4
傳送網路請求url4，獲取最終的資料data4

上面的程式碼有什麼問題嗎？不夠優雅！Promise可以以一種非常優雅的方式來解決這個問題。

2、Promise的使用

01-Promise的基本使用

這裡，我們用一個定時器來模擬非同步事件。

假設下面的result是從網路上1秒後請求的結果，根據結果的不同我們採取不同額處理方式

new Promise((resolve, reject) => {
  setTimeout(function () {
    let result = false;
    if (result == true) {
      resolve("網路資料返回資料為true");
    } else 
 {
      reject("網路資料返回為false");
    }
  }, 1000);
})
  .then((data) => {
    console.log(data);
  })
  .catch((data) => {
    console.log(data);
  });

View Code

02-Promise三種狀態

非同步操作之後會有三種狀態

pending：等待狀態，比如正在進行網路請求，或者定時器沒有到時間。
fulfill：滿足狀態，當我們主動回調了resolve時，就處於該狀態，並且會回撥.then()
reject：拒絕狀態，當我們主動回調了reject時，就處於該狀態，並且會回撥.catch()

03-Promise的另外處理形式

04-Promise的處理多次回撥形式

/*
我們需要通過一個url1從伺服器載入一個數據data1，data1中包含了下一個請求的url2
我們需要通過data1取出url2，從伺服器載入資料data2，data2中包含了下一個請求的url3
我們需要通過data2取出url3，從伺服器載入資料data3，data3中包含了下一個請求的url4
傳送網路請求url4，獲取最終的資料data4 
*/
new Promise((resolve, reject) => {
  setTimeout(function () {
    let data1 = {
      url2: "www.baidu.com",
      msg: "通過一個url1從伺服器載入一個數據data1",
    };
    resolve(data1);
  }, 1000);
}).then(
  (data) => {
    console.log("我們通過data1取出url2: " + data.url2);
    new Promise((resolve, reject) => {
      setTimeout(function () {
        let data2 = {
          url3: "www.qq.com",
        };
        resolve(data2);
      }, 1000);
    }).then(
      (data) => {
        console.log("我們通過data2取出url3: " + data.url3);
        new Promise((resolve, reject) => {
          setTimeout(function () {
            let data3 = {
              url4: "www.cnblogs.com",
            };
            resolve(data3);
          }, 1000);
        }).then((data) => {
          console.log("我們通過data3取出url4: " + data.url4);
          new Promise((resolve, reject) => {
            setTimeout(function () {
              let data4 = {
                msg: "我是data4中的資料",
              };
              resolve(data4);
            }, 1000);
          }).then((data) => {
            console.log(data.msg);
          });
        });
      }
    );
  },
  (error) => {
    console.log(error);
  }
);

1.0版本

/*
我們需要通過一個url1從伺服器載入一個數據data1，data1中包含了下一個請求的url2
我們需要通過data1取出url2，從伺服器載入資料data2，data2中包含了下一個請求的url3
我們需要通過data2取出url3，從伺服器載入資料data3，data3中包含了下一個請求的url4
傳送網路請求url4，獲取最終的資料data4 
*/
new Promise((resolve, reject) => {
  setTimeout(function () {
    let data1 = {
      url2: "www.baidu.com",
      msg: "通過一個url1從伺服器載入一個數據data1",
    };
    resolve(data1);
  }, 1000);
})
  .then(
    (data) => {
      console.log("我們通過data1取出url2: " + data.url2);
      return new Promise((resolve, reject) => {
        setTimeout(function () {
          let data2 = {
            url3: "www.qq.com",
          };
          resolve(data2);
        }, 1000);
      });
    },
    (error) => {
      console.log(error);
    }
  )
  .then((data) => {
    console.log("我們通過data2取出url3: " + data.url3);
    return new Promise((resolve, reject) => {
      setTimeout(function () {
        let data3 = {
          url4: "www.cnblogs.com",
        };
        resolve(data3);
      }, 1000);
    });
  })
  .then((data) => {
    console.log("我們通過data3取出url4: " + data.url4);
    let data4 = {
      msg: "我是data4中的資料",
    };
    return Promise.resolve(data4);
  })
  .then((data) => {
    console.log(data.msg);
  });

2.0版本

3.0版本的簡寫

05-Promise的all方法使用

Promise.all([
  new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve({name:"yango",age:20});
    }, 2000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve({name:"yangke",age:21});
    }, 1000);
  }),
]).then(results=>{
  console.log(results);
});