1.Promise:2个属性,2个回调,3种状态,4种方法
2个属性:
PromiseState(状态)、PromiseResult(return 结果)
2个回调:
resolve, reject
3种状态:
未决定的:pending:未曾回调方法
成功:resolved、fulfilled:回调了resolve()
失败:rejected:回调了rejected()
状态变化:
(1)从pending变成resolved/fulfilled
(2)从pending变成reject
4种方法:
then和catch方法、resolve和reject方法
-
基本使用
const p = new Promise((reresolve, reject) => { setTimeout(() => { let data = '用户' // resolve(data) reject(data) }, 1000); }).then((res) => { console.log(res); }, (rej) => { console.error(rej); });
-
引入 fs 模块
读取文件
const fs = require('fs'); const p = new Promise((resolve, reject) => { fs.readFile('./文件', (err, data) => { if (err) reject(err); resolve(data); }) }).then((res) => { console.log(res.toString()); }, (rej) => { console.error(rej); });
-
封装Ajax
//1.创建对象 const p = new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); //2.初始化 xhr.open("GET", "https://api.apiopen.top/getJoke") //3.发送 xhr.send(); //4.绑定事件,处理响应结果 xhr.onreadystatechange = function () { //判断 if (xhr.readyState === 4) { //判断响应状态码 200——300 if (xhr.status >= 200 && xhr.status < 300) { //成功 resolve(xhr.response) } else { //失败 reject(xhr.status) } } } }).then((res) => { console.log(res); }, (rej) => { console.log(rej); });
-
Promise.Prototype.then方法:返回值依然是promise类型
const p = new Promise((resolve, reject) => { resolve('用书'); // reject('出错拉') }); const a = p.then(res => { //以下三种取一种演示 //1. 非promise类型 :成功状态 return 111; //2. 是promise类型 :根据嵌套内部的promise返回的成功或失败状态 return new Promise((resolve, reject) => { // reject('出错拉') resolve(); }); //3.抛出错误:失败状态 throw err; }, rej => { console.log(rej); }); console.log(a);
-
链式调用:避免回调地狱
const p = new Promise((resolve, reject) => { // resolve('用书'); reject('出错拉') }); const a = p.then(res => { return res; }, rej => { console.log(rej);//出错拉 return 11; }).then((res) => { console.log(res); }, (rej) => { console.log(rej);//11 取决于上一个函数的return值 }); console.log(a);
解决回调地狱
//原始办法 const fs = require('fs'); // fs.readFile('./文件', (err, data) => { // fs.readFile('./文件2', (err, data2) => { // fs.readFile('./文件3', (err, data3) => { // console.log(data + data2 + data3); // }) // }) // }) //Promise 办法 const p = new Promise((resolve, rejects) => { fs.readFile('./文件', (err, data) => { resolve(data) }) }).then(value => { return new Promise((resolve, rejects) => { fs.readFile('./文件2', (err, data) => { resolve([value, data]) }) }) }).then(value => { fs.readFile('./文件3', (err, data) => { value.push(data) console.log(value.join('\r\n')); }) })
-
catch方法:主要捕捉失败状态
const p = new Promise((resolve, reject) => { reject('出错啊'); }).catch((rej) => { console.error(rej); });