Promise的介紹及基本用法是什么

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)Promise的介紹及基本用法是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

• Promise 構(gòu)造函數(shù): Promise (excutor) {}

• Promise.prototype.then 方法

• Promise.prototype.catch 方法

Promise的基本使用

實例化Promise

new Promise()

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

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

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

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

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

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

promise的then方法

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

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

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

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

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

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

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

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

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

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

所以then可以鏈式調(diào)用使用方法可參見下面promise應(yīng)用示例。

promise的catch方法

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

Promise對象的狀態(tài)為resolve，就會調(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就會調(diào)用catch方法的回調(diào)函數(shù)來處理這個問題。

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

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

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

promise對象的錯誤具有冒泡的性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個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)生的錯誤都可以被catch捕獲到
    console.log(err);  // err
})

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

promise應(yīng)用 

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

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

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

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

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

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

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

接下來我們使用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對象，我們可以繼續(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請求

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

const promise = new Promise((resolve, reject) => {
    // 創(chuàng)建對象
    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 () {
        // 判斷
        // 進入最后一個階段，所有的響應(yīng)體都回來了
        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);
})

上述就是小編為大家分享的Promise的介紹及基本用法是什么了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。