React Promise

一、Promise是什麼

Promise（承諾）是 ECMAScript 6 標準中新增加的特性之一，它是一種非同步編程解決方案。Promise 是對回調（Callback）的一種封裝，將非同步操作從回調函數中分離出來，使其更加清晰、簡潔。

Promise 對象代表一個未完成但最終會完成的操作。簡單的說，當我們執行某個非同步操作時，Promise 立即返回一個代表該非同步操作已經啟動的 Promise 對象，這個 Promise 對象最終會變成完成（fulfilled）狀態並返回結果或者變成錯誤（rejected）狀態返回錯誤信息。

React 中的 Promise 也被稱為 React Promise，它是基於原生的 Promise 的一個封裝，專門用於處理非同步操作。

{/*
React Promise 的基本使用格式如下所示：
new Promise((resolve, reject) => {
  // 非同步操作，可以是請求、定時器等等
})
.then((result) => {
  // 成功執行的邏輯代碼
})
.catch((error) => {
  // 失敗執行的邏輯代碼
});
*/}

二、React Promise的特性

React Promise 有以下幾個特性：

1. 可以鏈式調用：通過使用 then 方法，可以讓多個非同步操作按照一定的順序逐次執行。

2. 可以傳遞參數和返回值：Promise 實例的 then 方法接受兩個參數，分別是處理成功的回調函數和處理失敗的回調函數。這兩個函數可以接受參數，並且可以返回值，這些參數和返回值可以在後續的 then 方法中使用。

3. 可以處理多個非同步操作：可以同時處理多個非同步操作，通過 Promise.all 可以讓多個非同步操作同時執行，最後將結果合併。

{/*
React Promise 處理多個非同步操作的示例代碼：
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2');
  }, 2000);
});

Promise.all([promise1, promise2]).then(values => {
  console.log(values); // ['promise1', 'promise2']
});
*/}

三、React Promise的應用場景

React Promise 的應用場景非常廣泛，主要用於以下幾個方面：

1. 非同步請求：比如使用 fetch / axios / ajax 等庫進行非同步數據請求操作，使用 Promise 封裝可以更加規範，簡潔。

{/*
React Promise 封裝 fetch 請求的代碼示例：
const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    fetch(url).then(response => {
      if (response.ok) {
        resolve(response.json());
      } else {
        reject(response.status);
      }
    }).catch(error => {
      reject(error);
    });
  });
};

fetchData('https://jsonplaceholder.typicode.com/todos/1')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });
*/}

2. 定時器：使用 Promise 可以讓定時器更加規範、可控。

3. 數組操作：比如批量處理數據時，可使用 Promise.all 將多個 Promise 合併處理。

{/*
React Promise 基於 Promise.all 的數組操作示例代碼：
const ids = [1, 2, 3, 4];

const fetchData = (id) => {
  return new Promise((resolve, reject) => {
    fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then(response => {
      if (response.ok) {
        resolve(response.json());
      } else {
        reject(response.status);
      }
    }).catch(error => {
      reject(error);
    });
  });
};

const promises = ids.map(id => fetchData(id));

Promise.all(promises).then(values => {
  console.log(values);
}).catch(error => {
  console.log(error);
});
*/}

四、總結

React Promise 是一個非常有用的非同步操作處理工具，可以讓非同步操作變得更加規範、簡潔。在實際開發中，無論是在處理非同步請求、定時器還是數組操作方面，都可以使用 React Promise 來實現。