Web前端最全前端面试之问到promise怎么办？(1)，2024年最新2024年阿里Web前端高级面试题及答案

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可以先看下promise的结构

function Promise(executor){

var self = this

self.status = ‘pending’ // Promise当前的状态

self.data = undefined // Promise的值

self.onResolvedCallback = [] // Promise resolve时的回调函数集，因为在Promise结束之前有可能有多个回调添加到它上面

self.onRejectedCallback = [] // Promise reject时的回调函数集，因为在Promise结束之前有可能有多个回调添加到它上面

executor(resolve, reject) // 执行executor并传入相应的参数

}

promise的结构简单来说就是，它有个status表示三种状态**，pending(挂起),resolve(完成),reject(拒绝)。除此之外，它还有两个回调方法onResolvedCallback** 和 onRejectedCallback，分别对应resolve(完成) 和reject(拒绝)。

假如前面面试官问你promise的概念和基本用法，你像我一样提到了ajax的话，面试官很可能就会顺口问一下ajax（毕竟也是前端应该掌握得基础知识之一）。根据我的经验来看，一线大厂的面试官这个时候很可能会要你用promise撸一个ajax出来，一来可以考察你promise和ajax掌握得怎么样，二来可以考察你的代码能力。

1.1用promise来实现Ajax

const $ = (function(){

const ajax = function(url, async = false, type = ‘GET’){

const promise = new Promise(function(resolve, reject){

const handler = function(){

if(this.readyState !== 4){

return;

}

if(this.status === 200){

resolve(this.response);

}else{

reject(new Error(this.statusText));

}

}

const client = new XMLHttpRequest();

client.open(type, url);

client.onreadystatechange = handler;

client.responseType = ‘json’;

client.setRequestHeader(“Accept”, “application/json”);

client.send();

})

return promise;

}

return {

ajax

};

})()

调用方式：

$.ajax(“/posts.json”).then(function(json) {

console.log('Contents: ’ + json);

}, function(error) {

console.error(‘出错了’, error);

});

（二）手动实现一个 Promise/A

---

要注意的几个点：1.*then方法会返回一个新的promise，因此then方法应该写到原型链上。2.promise 的返回值或者抛出的err 会有传递现象。

例如：

new Promise(resolve=>resolve(8))

.then()

.catch()

.then(function(value) {

alert(value)

})

// 根据promise的定义和调用方式，可以先写出promise的数据结构

function Promise(executor){

const _this = this;

_this.status = ‘pending’;

_ths.data = undefined;

_this.onRejectedCallback = [];

_this.onResolvedCallback = [];

function resolve(value){

if(_this.status === ‘pending’){

_this.status = ‘resolved’;

_this.data = value;

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

_this.onResolvedCallbacki;

}

}

}

function reject(reason){

if(_this.status === ‘pending’){

_this.status = ‘rejected’;

_this.data = reason;

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

_this.onRejectedCallbacki;

}

}

}

try{

executor(resolve, reject);

}catch (e){

reject(e)

}

}

// then方法应该写在原型链上

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

const self = this;

// 要判断onResolved 和 onRejected是不是方法

onResolved = typeof onResolved === ‘function’ ? onResolved : function(value) { return value }

onRejected = typeof onRejected === ‘function’ ? onRejected : function(reason) { return reason }

if(self.status === ‘resolved’){

return new Promise(function(resolve, reject){

try{

const resoult = onResolved(self.data);

if( resoult instanceof Promise ){ // 如果返回的是新的promise，那么用这个promise的痛恨方法

resoult.then(resolve, reject)

}

resolve(resoult) // 否则 直接讲返回值作为newPromise的结果

}.catch(e){

reject(e);

}

});

}

// 此处与前一个if块的逻辑几乎相同，区别在于所调用的是onRejected函数，就不再做过多解释

if (self.status === ‘rejected’) {

return new Promise(function(resolve, reject) {

try {

var resoult = onRejected(self.data)

if (resoult instanceof Promise) {

resoult.then(resolve, reject)

}

} catch (e) {

reject(e)

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

se) {

resoult.then(resolve, reject)

}

} catch (e) {

reject(e)

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-RNO8VrAd-1715885523823)]

[外链图片转存中…(img-ZBJrilwa-1715885523824)]