淺析Promise的介紹及基本用法

更新時(shí)間：2021年10月20日 16:10:59 作者：李公子丶

Promise是異步編程的一種解決方案，在ES6中Promise被列為了正式規(guī)范，統(tǒng)一了用法，原生提供了Promise對(duì)象。接下來(lái)通過(guò)本文給大家介紹Promise的介紹及基本用法，感興趣的朋友一起看看吧

Promise是ES6引入的異步編程的新解決方案。語(yǔ)法止Promise是-一個(gè)構(gòu)造函數(shù)，
用來(lái)封裝異步操作并可以獲取其成功或失敗的結(jié)果。

Promise 構(gòu)造函數(shù): Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法

Promise的基本使用

實(shí)例化Promise

new Promise()

在實(shí)例化的時(shí)候接受一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)函數(shù)。

這個(gè)函數(shù)有兩個(gè)形參，resolve 和 reject

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

我們?cè)谶@里使用定時(shí)器來(lái)模擬異步操作

promise有三種狀態(tài)，分別是：進(jìn)行中、成功、失敗。

var promise = new Promise((resolve,reject) => {
    // 這是一個(gè)異步操作
    setTimeout(() => {
        // 這里模擬獲取數(shù)據(jù)
        var data = '獲取的數(shù)據(jù)'
        // 在得到數(shù)據(jù)之后我們可以調(diào)用resolve和reject方法來(lái)改變promise對(duì)象的狀態(tài)
        resolve(data)  // resolve可以將promise對(duì)象的狀態(tài)改為成功，reject()可以promise將對(duì)象狀態(tài)改為失敗
    }, 1000);
})

promise的then方法

當(dāng)promise對(duì)象的狀態(tài)為成功或者失敗時(shí)可以調(diào)用then方法

then方法接受兩個(gè)參數(shù)，而且兩個(gè)參數(shù)都是函數(shù)類型的值

promise對(duì)象的狀態(tài)為成功時(shí)，會(huì)調(diào)用then方法的第一個(gè)參數(shù)

也是就說(shuō)promise對(duì)象的狀態(tài)為失敗時(shí)，會(huì)調(diào)用then方法的第二個(gè)參數(shù)

第二個(gè)參數(shù)時(shí)可選的，如果不需要捕獲失敗可以省略

參數(shù)分別有一個(gè)形參，成功的函數(shù)叫value, 失敗的err

promise.then(value => {
// 當(dāng)異步函數(shù)里面調(diào)用了resolve(data)，也是就說(shuō)promise對(duì)象的狀態(tài)為成功時(shí)，會(huì)調(diào)用then方法的第一個(gè)參數(shù)
console.log(value);  // 'hello world' value就是resolve()方法傳遞過(guò)來(lái)的數(shù)據(jù)
}, err => {
   // 當(dāng)異步函數(shù)里面調(diào)用了reject(data)，也是就說(shuō)promise對(duì)象的狀態(tài)為失敗時(shí)，會(huì)調(diào)用then方法的第二個(gè)參數(shù)
    console.log(err);  // err就是reject()方法傳遞過(guò)來(lái)的數(shù)據(jù) 
})

調(diào)用then方法then方法的返回結(jié)果是Promise 對(duì)象，對(duì)象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定

如果回調(diào)函數(shù)中返回的結(jié)果是非promise類型的屬性，狀態(tài)為成功，返回值為對(duì)象的成功的值

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的情況 狀態(tài)為成功，返回值為對(duì)象的成功的值 
// 返回結(jié)果是Promise 對(duì)象，對(duì)象狀態(tài)由回調(diào)函數(shù)的執(zhí)行結(jié)果決定
// 拋出錯(cuò)誤,狀態(tài)為失敗
console.log(data);

所以then可以鏈?zhǔn)秸{(diào)用使用方法可參見(jiàn)下面promise應(yīng)用示例。

promise的catch方法

promise的catch方法是then(null, rejection)的別名，用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)

Promise對(duì)象的狀態(tài)為resolve，就會(huì)調(diào)用then方法的指定回調(diào)函數(shù)

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

如果promise的狀態(tài)為rejected就會(huì)調(diào)用catch方法的回調(diào)函數(shù)來(lái)處理這個(gè)問(wèn)題。

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

如果then方法在運(yùn)行中出現(xiàn)錯(cuò)誤也會(huì)被catch方法捕獲

const promise = new Promise((resolve, reject) => {
    resolve('err')
})
promise.then(val => {
    console.log('ok');    // ok
    throw '出錯(cuò)了??！'     // then里面拋出的錯(cuò)誤會(huì)繼續(xù)被catch捕獲
}).catch(err => {
    console.log(err);  // 出錯(cuò)了！！
})

promise對(duì)象的錯(cuò)誤具有冒泡的性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止。也就是說(shuō)，錯(cuò)誤總是會(huì)被下一個(gè)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 => {
    // 以上產(chǎn)生的錯(cuò)誤都可以被catch捕獲到
    console.log(err);  // err
})

一般來(lái)說(shuō)，不要在then方法中定義rejected狀態(tài)回調(diào)函數(shù)（即then的第二個(gè)參數(shù)），而應(yīng)總是使用catch方法。

promise應(yīng)用

promise讀取文件，多個(gè)文件連續(xù)調(diào)用

在這個(gè)例子中我們用到了Node.js的文件模塊

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

在下面代碼中我們使用了promise包裝了異步函數(shù)

我們先來(lái)看看正常的文件讀取操作

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

我們?nèi)绻朐谧x取成功之后繼續(xù)讀取文件，就需要在回調(diào)函數(shù)中繼續(xù)使用fs.readFile...去讀取文件，嵌套層次一多，這樣一來(lái)就會(huì)形成回調(diào)地獄。

接下來(lái)我們使用Promise的方式來(lái)讀取文件

// 讀取文件信息
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());
    // 返回一個(gè)Promise對(duì)象
    return new Promise((resolve, reject) => {
        fs.readFile('./02.txt', (err, data) => {
            if (err) return reject(err)
            resolve(data)
        })
    })
}, err => {
    console.log(err);
})
// 上一個(gè)then里面返回的是一個(gè)promise對(duì)象，我們可以繼續(xù).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請(qǐng)求

封裝了ajax請(qǐng)求，使用then獲取結(jié)果，讓代碼看起來(lái)更加簡(jiǎn)潔，解決了回調(diào)地獄的問(wèn)題

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

到此這篇關(guān)于淺析Promise的介紹及基本用法的文章就介紹到這了,更多相關(guān)Promise使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: