淺析Promise的介紹及基本用法

Posted on by

Promise是ES6引入的異步編程的新解決方案。語法止Promise是-一個構造函數，
用來封裝異步操作並可以獲取其成功或失敗的結果。

  • Promise 構造函數: Promise (excutor) {}
  • Promise.prototype.then 方法
  • Promise.prototype.catch 方法

Promise的基本使用

實例化Promise

new Promise()

在實例化的時候接受一個參數， 這個參數是一個函數。

這個函數有兩個形參，resolve 和 reject

var promise = new Promise((resolve,reject) => {
    // 裡面用於處理異步操作
})

我們在這裡使用定時器來模擬異步操作

promise有三種狀態，分別是：進行中、成功、失敗。

var promise = new Promise((resolve,reject) => {
    // 這是一個異步操作
    setTimeout(() => {
        // 這裡模擬獲取數據
        var data = '獲取的數據'
        // 在得到數據之後我們可以調用resolve和reject方法來改變promise對象的狀態
        resolve(data)  // resolve可以將promise對象的狀態改為成功，reject()可以promise將對象狀態改為失敗
    }, 1000);
})

promise的then方法

當promise對象的狀態為成功或者失敗時可以調用then方法

then方法接受兩個參數，而且兩個參數都是函數類型的值

promise對象的狀態為成功時，會調用then方法的第一個參數

也是就說promise對象的狀態為失敗時，會調用then方法的第二個參數

第二個參數時可選的，如果不需要捕獲失敗可以省略

參數分別有一個形參，成功的函數叫value, 失敗的err

promise.then(value => {
// 當異步函數裡面調用瞭resolve(data)，也是就說promise對象的狀態為成功時，會調用then方法的第一個參數
console.log(value);  // 'hello world' value就是resolve()方法傳遞過來的數據
}, err => {
   // 當異步函數裡面調用瞭reject(data)，也是就說promise對象的狀態為失敗時，會調用then方法的第二個參數
    console.log(err);  // err就是reject()方法傳遞過來的數據 
})

調用then方法then方法的返回結果是Promise 對象，對象狀態由回調函數的執行結果決定

如果回調函數中返回的結果是非promise類型的屬性，狀態為成功，返回值為對象的成功的值

let data = promise.then((val) => {
    // console.log(val.result);
    // 返回非Promise的情況
    // return val.result
 
    // 返回Promise的情況
    return new Promise( (resolve, reject) => {
        // resolve('ok')
        reject('err')
    })
}, err => {
console.log(err);
})
// 返回非Promise的情況 狀態為成功，返回值為對象的成功的值 
// 返回結果是Promise 對象，對象狀態由回調函數的執行結果決定
// 拋出錯誤,狀態為失敗
console.log(data);

所以then可以鏈式調用使用方法可參見下面promise應用示例。

promise的catch方法

promise的catch方法是then(null, rejection)的別名，用於指定發生錯誤時的回調

Promise對象的狀態為resolve，就會調用then方法的指定回調函數

const promise = new Promise((resolve, reject) => {
    resolve('ok')
})
promise.then(val => {
    console.log(val);  // ok
}).catch(err => {
    console.log(err);
})

如果promise的狀態為rejected就會調用catch方法的回調函數來處理這個問題。

const promise = new Promise((resolve, reject) => {
    reject('err')
})
promise.then(val => {
    console.log(val);
}).catch(err => {
    console.log(err);  // err
})

如果then方法在運行中出現錯誤也會被catch方法捕獲

const promise = new Promise((resolve, reject) => {
    resolve('err')
})
promise.then(val => {
    console.log('ok');    // ok
    throw '出錯瞭！！'     // then裡面拋出的錯誤會繼續被catch捕獲
}).catch(err => {
    console.log(err);  // 出錯瞭！！
})

promise對象的錯誤具有冒泡的性質，會一直向後傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch捕獲。

const promise = new Promise((resolve, reject) => {
    resolve('ok')
})
promise.then(val => {
    return new Promise((resolve, reject) => {
        reject('err')
    })
})
.then(val => {
    return new Promise((resolve, reject) => {
        reject('err')
    })
})
.catch(err => {
    // 以上產生的錯誤都可以被catch捕獲到
    console.log(err);  // err
})

一般來說，不要在then方法中定義rejected狀態回調函數（即then的第二個參數），而應總是使用catch方法。

promise應用 

promise讀取文件，多個文件連續調用

在這個例子中我們用到瞭Node.js的文件模塊

// 讀取文件信息
const fs = require('fs')

在下面代碼中我們使用瞭promise包裝瞭異步函數

我們先來看看正常的文件讀取操作

// 讀取文件信息
const fs = require('fs')
 
// 如果讀取失敗err就是一個錯誤對象，讀取成功data就是數據
fs.readFile('./01.txt', (err, data) => {
    // 判斷是否出現錯誤，如果讀取錯誤就打印錯誤對象。
    if (err) {
        console.log(err);
        return
    }
    console.log(data.toString());
})

我們如果想在讀取成功之後繼續讀取文件，就需要在回調函數中繼續使用fs.readFile…去讀取文件，嵌套層次一多，這樣一來就會形成回調地獄。 

接下來我們使用Promise的方式來讀取文件

// 讀取文件信息
const fs = require('fs')
 
const promise = new Promise((resolve, reject) => {
    fs.readFile('./01.txt', (err, data) => {
        if (err) return reject(err)
        resolve(data)
    })
})
 
promise.then(val => {
    console.log(val.toString());
    // 返回一個Promise對象
    return new Promise((resolve, reject) => {
        fs.readFile('./02.txt', (err, data) => {
            if (err) return reject(err)
            resolve(data)
        })
    })
}, err => {
    console.log(err);
})
// 上一個then裡面返回的是一個promise對象，我們可以繼續.then
.then(val => {
    console.log(val.toString());
    return new Promise((resolve, reject) => {
        fs.readFile('./03.txt', (err, data) => {
            if (err) return reject(err)
            resolve(data)
        })
    })
}, err => {
    console.log(err);
})
.then(val => {
    console.log(val.toString());
}, err => {
    console.log(err);
})

promise封裝ajax請求

封裝瞭ajax請求，使用then獲取結果，讓代碼看起來更加簡潔，解決瞭回調地獄的問題

const promise = new Promise((resolve, reject) => {
    // 創建對象
    const xhr = new XMLHttpRequest()
    // 初始化
    xhr.open("GET", 'https://api.apiopen.top/getSongPoetry?page=1&count=20')
    // 發送
    xhr.send()
    // 綁定事件處理響應結果
    xhr.onreadystatechange = function () {
        // 判斷
        // 進入最後一個階段，所有的響應體都回來瞭
        if (xhr.readyState === 4) {
            // 判斷響應碼
            if (xhr.status >= 200 && xhr.status < 300) {
                // 表示成功
                // console.log(JSON.parse(xhr.response));
                resolve(JSON.parse(xhr.response))
            } else {
                reject(xhr.status)
            }
        }
    }
})
// 指定回調
promise.then((val) => {
    console.log(val);
}, err => {
    console.log(err);
})

到此這篇關於淺析Promise的介紹及基本用法的文章就介紹到這瞭,更多相關Promise使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：