Promise方法


Posted by Erica on 2021-04-09

Promise 是用來解決 AJAX 非同步問題,優化非同步程式的 ES6 語法,會回傳「接受」或「拒絕」的結果。

AJAX 是 JavaScript 與 XML 技術的縮寫,網頁不用重新整理,就能即時透過瀏覽器跟伺服器溝通、撈取資料。

function promise(num) {
  return new Promise((resolve, reject) => {
    num ? resolve(num) : reject('失敗')
  })
}

以下整理一些 Promise 方法:

Promise.resolve 和 Promise.reject

Promise.resolvePromise.reject 都是直接定義 Promise 物件已完成的狀態,會產生一個新的 Promise 物件。

const result = Promise.resolve('result')
result.then(res => {
    console.log(res, 'success') // 成功部分可以正確接收結果
}).catch(res => {
    console.log(res, 'fail') // 失敗部分不會取得結果
})

---

const result = Promise.reject('result')
result.then(res => {
    console.log(res, 'success')
}).catch(res => {
    console.log(res, 'fail') // 只會取得失敗結果
})

Promise.race

Promise.race 會透過陣列執行多個 Promise,但僅會回傳第一個結果,無論結果為成功或失敗。

Promise.all

Promise.all 會透過陣列傳入多個 Promise 函式,在「全部執行完後」回傳陣列局果,並且順序與一開始傳入一致,適合「多支API一起執行」,確保全部完成後才進行其他工作。

Promise.all([promise(1), promise(2), promise(3)])
    .then((res) => {
        console.log(res) // ["1", "2", "3"]
    })

Fetch

Fetch 會使用 ES6 的 Promise 作回應(then、catch),回傳的資料為 ReadableStream 物件,需要使用不同資料類型的應對方法,才能正確取得資料。

ReadableStream 的資料類型有:text()json()formData()blob()arrayBuffer()

const url = 'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json'

fetch(url)
    .then(res => {
        return res.json() // 先轉成 json 格式
    })
    .then(res => {
        console.log(res) // 再接收轉換後的資料
    })
    .catch(res => {
        console.log(res)
    })

參考文章:


#javascript







Related Posts

Guided Policy Search 環境安裝

Guided Policy Search 環境安裝

ASP.NET Core Web API 入門教學 - 開發環境安裝

ASP.NET Core Web API 入門教學 - 開發環境安裝

git 運作原理&基本指令

git 運作原理&基本指令


Comments