Promise教程及用法

2021 年 8 月 16 日
筆記
Web前端

1，介紹
2，特點
3，缺點
4，基本用法
5，then
6，catch
7，finally
8，all()
9，race()
10，allSettled()
11，any()
12，現有對象轉為Promise對象
13，實戰用法
14，手寫Promise

1，介紹

Promise是異步編程的一種解決方案，比回調函數和事件更合理且更強大。可以理解為一個容器，裏面保存着某個未來才會結束的事件的結果。

2，特點

Promise對象有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗），該狀態不受外界影響。
狀態可以從pending變為fulfilled，或者從pending變為rejected。一旦狀態改變，就不會再變。

3，缺點

Promise一旦新建它就會立即執行，無法中途取消
如果不設置回調函數，Promise內部拋出的錯誤，不會反應到外部
當處於pending狀態時，無法得知目前的進展是剛開始還是即將完成

4，基本用法

ES6規定，Promise對象是一個構造函數，用來生成Promise實例，它接受一個函數作為參數，該函數的兩個函數參數分別是resolve和reject，resolve的作用是將Promise對象的狀態從未完成變為成功，reject函數的作用是將Promise對象的狀態從未完成變為失敗。

const promise = new Promise(function(resolve, reject) {
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

5，then

Promise實例生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數（一般都只用第一個參數，reject狀態交由catch專門處理）

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve('done'), ms);
  });
}

timeout(100).then(
	// resolve回調
  (value) => { console.log(value) },
  // reject回調
  (error) => { console.log(error) }
);

Promise新建後就會立即執行，但是then方法是微任務，將在當前腳本所有同步任務執行完才會執行。如下代碼：首先輸出的是A。然後才是then方法指定的回調函數，所以B最後輸出。

let promise = new Promise(function(resolve, reject) {
  console.log('A');
  resolve();
});

promise.then(function() {
  console.log('B');
});

console.log('C');

// 輸出順序 A C B

then方法返回的是一個新的Promise實例（不是原來那個Promise實例）。因此可以採用鏈式寫法，即then方法後面再調用另一個then方法。

getJSON("/api")
.then(post => getJSON(post.commentURL))
.then(comments => console.log("resolve", comments))

如下代碼：p2操作的結果是返回p1的異步操作結果。這時p1的狀態就會傳遞給p2，也就是說，p1的狀態決定了p2的狀態。如果p1的狀態是pending，那麼p2的回調函數就會等待p1的狀態改變；如果p1的狀態已經是resolved或者rejected，那麼p2的回調函數將會立刻執行。

const p1 = new Promise(function (resolve, reject) {
  setTimeout(() => reject(new Error('fail')), 3000)
})

const p2 = new Promise(function (resolve, reject) {
  setTimeout(() => resolve(p1), 1000)
})

p2
  .then(result => console.log(result))
  .catch(error => console.log(error))

6，catch

和then一樣，catch()方法返回的也是一個Promise對象，因此後面還可以接着調用then()方法，如果沒有報錯，則會跳過catch()方法。此時，要是後面的then()方法裏面報錯，就與前面的catch()無關了

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行會報錯，因為x沒有聲明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});

7，finally

finally()方法是ES2018引入標準的。用於指定不管 Promise 對象最後狀態如何，都會執行的操作。該方法總是會返回原來的值，並且不接受任何參數，這意味着沒有辦法知道前面的 Promise狀態到底是fulfilled還是rejected。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

8，all()

Promise.all()方法用於將多個Promise實例，包裝成一個新的 Promise實例。該方法接受一個數組作為參數(可以不是數組，但必須具有Iterator接口，且返回的每個成員都是Promise實例)

const p = Promise.all([p1, p2, p3]);

如上代碼，p1、p2、p3都是Promise實例，如果不是，就會先調用Promise.resolve()，將參數轉為Promise實例，再進一步處理。

注意：

只有數組裡所有的Promise都完成，Promise.all()才會完成
如果數組裡的Promise有一個失敗，Promise.all()就會失敗，第一個失敗的Promise實例會傳遞給Promise.all()的回調
如果作為參數的Promise實例，自己定義了catch方法，那麼它一旦被rejected，並不會觸發Promise.all()的catch方法。

9，race()

Promise.race()方法同樣是將多個Promise實例，包裝成一個新的Promise實例，參數與Promise.all()方法一樣。

const p = Promise.race([p1, p2, p3]);

race的意思是速度，和字面意思一樣，誰快，就取誰作為結果。上面代碼中，只要p1、p2、p3之中有一個實例率先改變狀態，p的狀態就跟着改變。率先改變的Promise實例的返回值，就傳遞給p的回調函數。

10，allSettled()

Promise.allSettled()方法接受一個數組作為參數，數組的每個成員都是一個Promise對象，並返回一個新的Promise數組集合。

注意：只有等到參數數組的所有Promise對象都發生狀態變更(不管是fulfilled還是rejected)，返回的Promise對象才會發生狀態變更。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('ok')
  }, 1000)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('no')
  }, 2000)
})
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('ok')
  }, 3000)
})

const all = Promise.allSettled([p1, p2, p3])
.then(res => {
  console.log(res)
})

11，any()

Promise.any()方法接受一個數組作為參數，數組的每個成員都是一個Promise對象，並返回一個新的Promise數組集合。

注意：只要參數數組的Promise對象有一個變成fulfilled狀態，Promise.any()就會變成fulfilled狀態。只有參數數組裡所有Promise對象都變成rejected狀態，Promise.any()才會變成rejected狀態。

const all = Promise.any([p1, p2, p3])
.then(res => {
 	console.log(res)
})
.catch(err => {
	console.log(err)
})

12，現有對象轉為Promise對象

有時需要將現有對象轉為Promise對象，Promise.resolve()和Promise.reject()就起到這個作用。

onst p = Promise.resolve('Hello');

p.then(function (s) {
  console.log(s)
});
// 輸出 Hello

或者

Promise.reject('出錯了')
.catch(e => {
  console.log(e)
})
// 輸出 出錯了

13，實戰用法

這裡列舉一些簡單的例子，還有很多用處。

13.1，小程序request

const Request = (options) =>{
  let url = baseURL + options.url;
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data: options.data || {},
      method: options.method || 'post',
      responseType: options.responseType || '',
      timeout: 15000,
      success (res) {
        if(res.statusCode === 200){
          resolve(res.data);
        }else{
          FN.Toast(res.errMsg);
        };
      },
      fail (res) {
        FN.Toast("網絡開小差了");
        reject(res);
      }
    })
  })
}

13.2，圖片加載

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
}

13.3，封裝Toast

import { Message, MessageBox} from 'element-ui'

/**
* 提示框
* @param {String} text
*/
alert(text) {
  return new Promise((resolve, reject) => {
    MessageBox.alert(text, '溫馨提示', {
      confirmButtonText: '確定',
      callback: action => {
		if (action === 'confirm'){
			resolve(action)
		} else {
			reject(action)
		}
      }
    })
  })
}

14，手寫Promise

class myPromise {
  constructor(executor) {
    this.initState()
    this.initBind()
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }
  initState() {
    this.result = null
    this.state = 'pending'
    this.resolveCallback = []
    this.rejectCallback = []
  }
  initBind() {
    this.resolve = this.resolve.bind(this)
    this.reject = this.reject.bind(this)
  }
  resolve(value) {
    if (this.state !== 'pending') return
    this.result = value
    this.state = 'success'
    while (this.resolveCallback.length) {
      this.resolveCallback.shift()(this.result)
    }
  }
  reject(value) {
    if (this.state !== 'pending') return
    this.result = value
    this.state = 'error'
    while (this.rejectCallback.length) {
      this.rejectCallback.shift()(this.result)
    }
  }
  then(onResolve, onReject) {
    onResolve = typeof onResolve === 'function' ? onResolve : res => res
    onReject = typeof onReject === 'function' ? onReject : res => res
    switch (this.state) {
      case 'pending':
        this.resolveCallback.push(onResolve.bind(this))
        this.rejectCallback.push(onReject.bind(this))
        break
      case 'success':
        onResolve(this.result)
        break
      case 'error':
        onReject(this.result)
        break
    }
  }
  catch(onReject) {
    return this.then(null, onReject)
  }
}

const fn = new myPromise((resolve, reject) => {
  setTimeout((res) => {
    resolve('成功')
  }, 2000)
})
.then(res => {
  console.log(res)
})

如果看了覺得有幫助的，我是@鵬多多，歡迎點贊關注評論；END

公眾號

往期文章

個人主頁

Tags: Web前端

Promise教程及用法

1，介紹

2，特點

3，缺點

4，基本用法

5，then

6，catch

7，finally

8，all()

9，race()

10，allSettled()

11，any()

12，現有對象轉為Promise對象

13，實戰用法

13.1，小程序request

13.2，圖片加載

13.3，封裝Toast

14，手寫Promise

VirMach 便宜 VPS

QNews

Promise教程及用法

1，介紹

2，特點

3，缺點

4，基本用法

5，then

6，catch

7，finally

8，all()

9，race()

10，allSettled()

11，any()

12，現有對象轉為Promise對象

13，實戰用法

13.1，小程序request

13.2，圖片加載

13.3，封裝Toast

14，手寫Promise

分享此文：

Related Posts

手把手教你搭建一個跟vue官方同款文檔（vuepress）

[譯]C#8.0中一個使接口更加靈活的新特性-默認接口實現

.NetCore+OpenSSL實現Https

理解阻塞、非阻塞、同步、異步

VirMach 便宜 VPS

QNews

熱門搜尋