Vue - 8 - 回顧 - Promise

在這裏插入圖片描述

Promise 在之前 ES6 的階段就完成了。 - 更多
下面,更多的是 回顧

在這裏插入圖片描述

# 什麼是Promise呢?

ES6 中一個非常重要和好用的特性就是 Promise

  • Promise 是異步編程的一種解決方案。

一種很常見的場景應該就是網絡請求了。

我們封裝一個網絡請求的函數,因爲不能立即拿到結果,所以不能像簡單的3+4=7一樣將結果返回。
所以往往我們會傳入另外一個函數,在數據請求成功時,將數據通過傳入的函數回調出去。
如果只是一個簡單的網絡請求,那麼這種方案不會給我們帶來很大的麻煩。

# 網絡請求的回調地獄

但是,當網絡請求非常複雜時,就會出現回調地獄。

在這裏插入圖片描述在這裏插入圖片描述

這樣的 代碼難看而且不容易維護。

Promise 可以以一種非常優雅的方式來解決這個問題。

# Promise的基本使用

在這裏插入圖片描述

## Promise三種狀態

首先, 當我們開發中有異步操作時, 就可以給異步操作包裝一個 Promise
異步操作之後會有三種狀態

我們一起來看一下這三種狀態:

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

在這裏插入圖片描述

## Promise的鏈式調用

我們在看 Promise 的流程圖時,發現無論是 then 還是 catch 都可以返回一個 Promise 對象。
所以,我們的代碼其實是可以進行鏈式調用的:
這裏我們直接通過 Promise 包裝了一下新的數據,將 Promise 對象返回了

  • Promise.resovle() :將數據包裝成 Promise 對象,並且在內部回調 resolve() 函數
  • Promise.reject() :將數據包裝成 Promise 對象,並且在內部回調 reject() 函數

在這裏插入圖片描述

## 鏈式調用簡寫

簡化版代碼:
如果我們希望數據直接包裝成 Promise.resolve ,那麼在 then 中可以直接返回數據
注意下面的代碼中,我講 return Promise.resovle(data) 改成了 return data
結果依然是一樣的

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章