前端面试重点--promise

Promise 初体验

点击抽奖

2)fs读取

//

const fs = require(‘fs’);

//回调函数 形式

// fs.readFile(‘./resource/content.txt’, (err, data) => {

// // 如果出错 则抛出错误

// if(err) throw err;

// //输出文件内容

// console.log(data.toString());

// });

//Promise 形式

let p = new Promise((resolve , reject) => {

fs.readFile(‘./resource/content.tx’, (err, data) => {

//如果出错

if(err) reject(err);

//如果成功

resolve(data);

});

});

//调用 then

p.then(value=>{

console.log(value.toString());

}, reason=>{

console.log(reason);

});

3).Ajax

Promise 封装 AJAX 操作

点击发送 AJAX

4).读取文件函数封装

/**

• 封装一个函数 mineReadFile 读取文件内容

• 参数: path 文件路径

• 返回: promise 对象

*/

function mineReadFile(path){

return new Promise((resolve, reject) => {

//读取文件

require(‘fs’).readFile(path, (err, data) =>{

//判断

if(err) reject(err);

//成功

resolve(data);

});

});

}

mineReadFile(‘./resource/content.txt’)

.then(value=>{

//输出文件内容

console.log(value.toString());

}, reason=>{

console.log(reason);

});

5).util.promisify 方法

/**

• util.promisify 方法

• 传入的函数，传入这个函数的最后一个参数是一个回调函数，且错误优先，像fs那种err是第一个参数，

• 帮忙封装一个返回值是promise对象的函数

*/

//引入 util 模块

const util = require(‘util’);

//引入 fs 模块

const fs = require(‘fs’);

//返回一个新的函数

let mineReadFile = util.promisify(fs.readFile);

mineReadFile(‘./resource/content.txt’).then(value=>{

console.log(value.toString());

});

6).封装AJAX操作

8.手写promise

构造函数版本

//声明构造函数

function Promise(executor){

//添加属性

this.PromiseState = ‘pending’;

this.PromiseResult = null;

//声明属性

this.callbacks = [];

//保存实例对象的 this 的值

const self = this;// self _this that

//resolve 函数

function resolve(data){

//判断状态

if(self.PromiseState !== ‘pending’) return;

//1. 修改对象的状态 (promiseState)

self.PromiseState = ‘fulfilled’;// resolved

//2. 设置对象结果值 (promiseResult)

self.PromiseResult = data;

//调用成功的回调函数

setTimeout(() => {

self.callbacks.forEach(item => {

item.onResolved(data);

});

});

}

//reject 函数

function reject(data){

//判断状态

if(self.PromiseState !== ‘pending’) return;

//1. 修改对象的状态 (promiseState)

self.PromiseState = ‘rejected’;//

//2. 设置对象结果值 (promiseResult)

self.PromiseResult = data;

//执行失败的回调

setTimeout(() => {

self.callbacks.forEach(item => {

item.onRejected(data);

});

});

}

try{

//同步调用『执行器函数』

executor(resolve, reject);

}catch(e){

//修改 promise 对象状态为『失败』

reject(e);

}

}

//添加 then 方法

Promise.prototype.then = function(onResolved, onRejected){

const self = this;

//判断回调函数参数

if(typeof onRejected !== ‘function’){

onRejected = reason => {

throw reason;

}

}

if(typeof onResolved !== ‘function’){

onResolved = value => value;

//value => { return value};

}

return new Promise((resolve, reject) => {

//封装函数

function callback(type){

try{

//获取回调函数的执行结果

let result = type(self.PromiseResult);

//判断

if(result instanceof Promise){

//如果是 Promise 类型的对象

result.then(v => {

resolve(v);

}, r=>{

reject®;

})

}else{

//结果的对象状态为『成功』

resolve(result);

}

}catch(e){

reject(e);

}

}

//调用回调函数 PromiseState

if(this.PromiseState === ‘fulfilled’){

setTimeout(() => {

callback(onResolved);

});

}

if(this.PromiseState === ‘rejected’){

setTimeout(() => {

callback(onRejected);

});

}

//判断 pending 状态

if(this.PromiseState === ‘pending’){

//保存回调函数

this.callbacks.push({

onResolved: function(){

callback(onResolved);

},

onRejected: function(){

callback(onRejected);

}

});

}

})

}

//添加 catch 方法

Promise.prototype.catch = function(onRejected){

return this.then(undefined, onRejected);

}

//添加 resolve 方法

Promise.resolve = function(value){

//返回promise对象

return new Promise((resolve, reject) => {

if(value instanceof Promise){

value.then(v=>{

resolve(v);

}, r=>{

reject®;

})

}else{

//状态设置为成功

resolve(value);

}

});

}

//添加 reject 方法

Promise.reject = function(reason){

return new Promise((resolve, reject)=>{

reject(reason);

});

}

//添加 all 方法

Promise.all = function(promises){

//返回结果为promise对象

return new Promise((resolve, reject) => {

//声明变量

let count = 0;

let arr = [];

//遍历

for(let i=0;i<promises.length;i++){

//

promises[i].then(v => {

//得知对象的状态是成功

//每个promise对象 都成功

count++;

//将当前promise对象成功的结果 存入到数组中

arr[i] = v;

//判断

if(count === promises.length){

//修改状态

resolve(arr);

}

}, r => {

reject®;

});

}

});

}

//添加 race 方法

Promise.race = function(promises){

return new Promise((resolve, reject) => {

for(let i=0;i<promises.length;i++){

promises[i].then(v => {

//修改返回对象的状态为 『成功』

resolve(v);

},r=>{

//修改返回对象的状态为 『失败』

reject®;

})

}

});

}

class版本

class Promise{

//构造方法

constructor(executor){

//添加属性

this.PromiseState = ‘pending’;

this.PromiseResult = null;

//声明属性

this.callbacks = [];

//保存实例对象的 this 的值

const self = this;// self _this that

//resolve 函数

function resolve(data){

//判断状态

if(self.PromiseState !== ‘pending’) return;

//1. 修改对象的状态 (promiseState)

self.PromiseState = ‘fulfilled’;// resolved

//2. 设置对象结果值 (promiseResult)

self.PromiseResult = data;

//调用成功的回调函数

setTimeout(() => {

self.callbacks.forEach(item => {

item.onResolved(data);

});

});

}

//reject 函数

function reject(data){

//判断状态

if(self.PromiseState !== ‘pending’) return;

//1. 修改对象的状态 (promiseState)

self.PromiseState = ‘rejected’;//

//2. 设置对象结果值 (promiseResult)

self.PromiseResult = data;

//执行失败的回调

setTimeout(() => {

self.callbacks.forEach(item => {

item.onRejected(data);

});

});

}

try{

//同步调用『执行器函数』

executor(resolve, reject);

}catch(e){

//修改 promise 对象状态为『失败』

reject(e);

}

}

//then 方法封装

then(onResolved,onRejected){

const self = this;

//判断回调函数参数

if(typeof onRejected !== ‘function’){

onRejected = reason => {

throw reason;

}

}

if(typeof onResolved !== ‘function’){

onResolved = value => value;

//value => { return value};

}

return new Promise((resolve, reject) => {

//封装函数

function callback(type){

try{

//获取回调函数的执行结果

let result = type(self.PromiseResult);

//判断

if(result instanceof Promise){

//如果是 Promise 类型的对象

result.then(v => {

resolve(v);

}, r=>{

reject®;

})

}else{

//结果的对象状态为『成功』

resolve(result);

}

}catch(e){

reject(e);

}

}

//调用回调函数 PromiseState

if(this.PromiseState === ‘fulfilled’){

setTimeout(() => {

callback(onResolved);

});

}

if(this.PromiseState === ‘rejected’){

setTimeout(() => {

callback(onRejected);

});

}

//判断 pending 状态

if(this.PromiseState === ‘pending’){

//保存回调函数

this.callbacks.push({

onResolved: function(){

callback(onResolved);

},

onRejected: function(){

callback(onRejected);

}

});

}

})

}

//catch 方法

catch(onRejected){

return this.then(undefined, onRejected);

}

//添加 resolve 方法

static resolve(value){

//返回promise对象

return new Promise((resolve, reject) => {

if(value instanceof Promise){

value.then(v=>{

resolve(v);

}, r=>{

reject®;

})

}else{

//状态设置为成功

resolve(value);

}

});

}

//添加 reject 方法

static reject(reason){

return new Promise((resolve, reject)=>{

reject(reason);

});

}

//添加 all 方法

static all(promises){

//返回结果为promise对象

return new Promise((resolve, reject) => {

//声明变量

let count = 0;

let arr = [];

//遍历

for(let i=0;i<promises.length;i++){

//

promises[i].then(v => {

//得知对象的状态是成功

//每个promise对象 都成功

count++;

//将当前promise对象成功的结果 存入到数组中

arr[i] = v;

//判断

if(count === promises.length){

//修改状态

resolve(arr);

}

}, r => {

reject®;

});

}

});

}

//添加 race 方法

static race (promises){

return new Promise((resolve, reject) => {

for(let i=0;i<promises.length;i++){

promises[i].then(v => {

//修改返回对象的状态为 『成功』

resolve(v);

},r=>{

//修改返回对象的状态为 『失败』

reject®;

})

}

});

}

}

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

}

//添加 resolve 方法

static resolve(value){

//返回promise对象

return new Promise((resolve, reject) => {

if(value instanceof Promise){

value.then(v=>{

resolve(v);

}, r=>{

reject®;

})

}else{

//状态设置为成功

resolve(value);

}

});

}

//添加 reject 方法

static reject(reason){

return new Promise((resolve, reject)=>{

reject(reason);

});

}

//添加 all 方法

static all(promises){

//返回结果为promise对象

return new Promise((resolve, reject) => {

//声明变量

let count = 0;

let arr = [];

//遍历

for(let i=0;i<promises.length;i++){

//

promises[i].then(v => {

//得知对象的状态是成功

//每个promise对象 都成功

count++;

//将当前promise对象成功的结果 存入到数组中

arr[i] = v;

//判断

if(count === promises.length){

//修改状态

resolve(arr);

}

}, r => {

reject®;

});

}

});

}

//添加 race 方法

static race (promises){

return new Promise((resolve, reject) => {

for(let i=0;i<promises.length;i++){

promises[i].then(v => {

//修改返回对象的状态为 『成功』

resolve(v);

},r=>{

//修改返回对象的状态为 『失败』

reject®;

})

}

});

}

}

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

[外链图片转存中…(img-LVjeRsMK-1718858635356)]

[外链图片转存中…(img-bB6Vn8I5-1718858635358)]