promise对象 —— ECMAScript 6入门读书笔记

书籍地址: ECMAScript 6 入门

promise含义

• 对象状态不受外界影响,存在三个状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)

• 状态改变,就不会再变,只能从进行中 —> 已成功,进行中 —> 已失败

const promise = new Promise((resolve, reject) => {
    resolve('成功');
    reject(new Error('错误'));
});

promise.then(data => {
    console.log(data)
}).catch(error => {
    console.log(error);
});

执行到resolve('成功')的时候,已经从进行中 ---> 已成功,无法从已成功 ---> 已失败,

promise使用

封装一个ajax请求

const getJson = (url) => {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.onreadystatechange =  () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    resolve(xhr.response);
                } else {
                    reject(new Error(xhr.statusText));
                }
            }
        };
        xhr.responseType = 'json';
        xhr.setRequestHeader("Accept", "application/json");
        xhr.send();
    });
};

getJson('./package.json').then(data => {
    console.log(data);
});

如果resolve是另外一个promise,那么resolve的状态由里面的promise决定

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

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

p2.then(data => {
    console.log('success', data);
}).catch(data => {
    console.log('error', data);
});

p2的resolve的参数是一个promise(p1),p2的状态由p1决定

一个promise定义之后会立即执行,resolve执行之后并不会截止,还会继续往下执行下去

const promise = new Promise((resolve, reject) => {
   console.log('hello');
   resolve('未截止');
   console.log('world');
});
console.log('promise执行完了');
promise.then(data => {
    console.log('then里面的内容', data);
});
console.log('js执行完了');

Promise.prototype.catch

promise.prototype.catch方法是.then(null, rejection)或者.then(undefined, rejection)的别名

const promise = new Promise((resolve, reject) => {
    reject('错误信息')
});

promise.then(data => {
    console.log('first then', data)
}).then(null, err => {
    console.log(err)
});

//与下面是等价的
promise.then(data => {
    console.log('first then', data)
}).catch( err => {
    console.log(err)
});

如果没有使用catch方法指定错误回调函数,在promise里面的错误不会影响外层代码的执行,但是还是会影响promise里面代码的执行

const promise = () => {
    return new Promise((resolve, reject) => {
        //x未定义,直接使用会报错
        resolve(x + 2);
        console.log('不可以运行这里');
    });
};

promise().then(data => {
    console.log(data)
});

let btn = document.getElementById('btn');
btn.addEventListener('click', () =>{
   console.log('点击了');
});

在promise里面执行错误之后,后面的代码(在promise作用域的代码)不会在执行,但是不会影响外层函数的代码执行,点击按钮还是会执行

catch可以捕获then里面promise执行的错误,但是catch只会捕获catch前面的,不会捕获catch后面的

const promise = (num) => {
    return new Promise((resolve, reject) => {
        if (num < 5) {
            resolve(10);
        } else {
            reject('大于了5')
        }
    });
};

promise().catch(err => {
    console.log(err);
}).then(data => {
    return promise(data);
});

如果需要继续捕获,需要在加catch

promise().catch(err => {
    console.log(err);
}).then(data => {
    return promise(data);
}).catch(err => {
    console.log('第二个catch', err);
});

Promise.prototype.finally

不管promise最后的状态如何,都会执行finally里面的代码,与try/catch里面的finally类似

const promise = new Promise((resolve, reject) => {
   resolve('成功了');
});

promise.then(data => {
    console.log(data)
}).finally(() => {
    console.log('执行了finally方法')
});

Promise.all

Promise.all接收一个promise实例对象数组,只有所有的promise都变为fulfilled,才会变为fulfilled,只要有一个变为了rejected,就会变为rejected

function isCollegeStudents(age) {
    return new Promise((resolve, reject) => {
       if (age >= 18 && age <= 22) {
           resolve(`${age} yes`);
       } else {
           reject(`${age} no`)
       }
    });
}

let promise = [22, 18, 19, 20, 21, 33].map(value => {
    return isCollegeStudents(value);
});

let promise1 = [22, 18, 19, 20, 21, 33].map(value => {
    return isCollegeStudents(value);
});

Promise.all(promise).then(data => {
    console.log(data)
}).then(err => {
    console.log(err);
});

Promise.all(promise1).then(data => {
    console.log(data)
}).catch(err => {
    console.log(err);
});

Promise.rase

和Promise.all方法一样,接收一个promise实例对象,不同的是,只要有一个变化了就会改变

Promise.resolve

将一个现有的对象转为Promise对象,参数可以为以下情况

参数是一个Promise实例

不会做任何更改,直接返回

参数是一个thenable对象

thenable是指对象有then方法,会将这个对象转为Promise对象,并且会立即执行thenable对象的then方法

let thenable = {
    then: function (resolve, reject) {
        resolve('thenable then');
        console.log('执行了then方法');
    }
};

let promise = Promise.resolve(thenable);
promise.then(data => {
    console.log(data)
});

参数不是具有thenable方法的对象,或者不是对象

会将其作为resolve里面的参数直接返回

let point = {
    x: 1,
    y: 2
};

let promise = Promise.resolve(point);

promise.then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});

});

let promise = Promise.resolve(point)等价于let promise = new Promise((resolve => resolve(point)))

参数为空

什么都不做,直接返回一个Promise实例对象

Promise.reject

Promise.reject和Promise.resolve不一样,会直接将其作为一个字符串返回,如果是一个thenable对象,并不会执行thenable对象的then方法