初步了解Promise

130 阅读2分钟

一.什么是Promise

1.抽象表达

1Promise是一门新的技术(ES6模范)
(2PromiseJS中进行异步编程的新解决方案

2.具体表达

1)从语法上来说,Promise是构造函数
(2)从功能上来说,Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

3.为什么要使用Promise

(1)指定回调函数的方式更加灵活
(2)支持链式调用,可以解决回调地狱问题

4.什么是回调地狱

回调函数嵌套使用。

16ddcf823fba8023d5c323be4ea56dc2.jpeg

二.Promise的一些使用

1.fs读取文件

const fs = require('fs');
function pReadFile(filepath) {
    return new Promise(function (resolve,reject) {
        fs.readFile(filepath, 'utf8', (err, data)=>{
            if (err) {
                reject(err);
            } else {
                resolve(data);
            }
        })
    })
}

pReadFile('./data/a.txt').then(function (data) {
    console.log(data);
    return pReadFile('./data/b.txt');
}).then(function (data) {
    console.log(data);
    return pReadFile('./data/c.txt');
}).then(function (data) {
    console.log(data);
})

2.AJAX请求

function sendAjax(url){
            return new Promise((resolve,reject)=>{
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open('GET',url);
                xhr.send();
                xhr.onreadystatechange = function () {
                        if (xhr.readyState === 4) {
                            if (xhr.status >= 200 && xhr.status < 300) {
                                resolve(xhr.response);
                            } else {
                                reject(xhr.status);
                            }
                        }
                    }   
            })
        }
        sendAjax('https://api.apiopen.top/getJoke').then((value)=>{
            console.log(value);
        },(reason)=>{
            console.log(reason);
        })

3.Pronmise对象状态属性介绍

(1)pending 变为 resolved

(2)pending 变为 rejected

说明:只有这两种,且一个promise对象只能改变一次

成功的结果数据一般称为value,失败的结果数据一般称为reason

4.Promise的API

1.Promise构造函数:Promise(excutor){}

(1)excutor函数: 执行器(resolve,reject)=>{}
(2)resolve函数:内部定义成功时我们调用的函数value =>{}
(3)reject函数:内部定义失败时我们调用的函数reason =>{}
说明:excutor会在promise内容立即同步调用,异步操作在执行其中进行

2.Promise.prototype.then方法;(onResolve,onReject)=>{}

(1)onResolve函数:成功的回调函数value=>{}
(2)onReject函数:失败的回调函数reason=>{}
说明:返回的是一个新的Promise对象

3.Promise.prototype.catch方法;(onReject)=>{}

onReject函数:成功的回调函数reason=>{}

5.Promise的一些方法

1.Promise.resolve方法:(value)=>{}

value:成功的数据或者promise对象

说明:返回一个成功或者失败的promise对象

2.Promise.reject方法:(reason)=>{}

reason:失败的原因

说明:返回一个失败的promise对象

3.Promise.all方法:(promises)=>{}

promise:包含n个promise的数组

说明:返回一个新的promise,全部成功才算成功,只要又=有一个失败就失败

4.Promise.race方法:(promises)=>{}

promise:包含n个promise的数组

说明:返回一个新的promise,第一个完成promise的结果状态就是最终的结果状态