前端面试总结答案

今日头条（答案可能会很长）

1.对async、await的理解，内部原理

答：①async---声明一个异步函数：自动将常规函数转换成promise，返回值也是一个promise对象，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数，内部可以使用await；

      ②await--暂停异步的功能执行：放在promise调用之前，await强制其他代码等待，直到promise完成并返回结果，只能与promise一起使用，不适用于回调，只能在async函数内部使用。

下面介绍下使用场景：

a.同时发出三个互不依赖的请求，不建议使用async/await

async function getABC() {
	let A= await getValueA();//A needs 2 second
	let B= await getValueB();//B needs 2 second
	let C= await getValueC();//C needs 2 second
	return A*B*C;
}

上图所示，上面我们A需要2s，B需要4s，C需要3s，我们如上图所示发请求，就存在彼此依赖的关系，c等b执行完，b等a执行完，从开始到结束需要（2+3+4）9s。

此时我们需要用Promise.all()将异步调用并行执行，而不是一个接一个执行，如下所示：

async function getABC() {
	let results = await Promise.all([getValueA,getValueB,getValueC]);
	return results.reduce((total,value)=>total*value)
}

这样将会节省我们不少的时间，从原来的的9s缩减到4s。

b.一个需要验证码提交表单的页面请求，此时使用async/await会更好

常规代码

const call1Promise = fetch('/#1...');
call1Promise.then(response=>response.json())
            .then(json=>{
            	//验证码返回后的后续操作
            	const call2Promise = fetch('/#2...');
            	return call2Promise;
            })
            .then(response=>response.json())
            .then(json=>{
            	console.log(json.respCode);
            })
            .catch(err=>{
            	console.log(err);
            })

用Async/Await的方式

将逻辑分装在一个async函数里，这样就可以直接对promise使用await了，也就规避了写then回调。最后我们调用这个async函数，然后按照普通的方式使用返回的promise。美哉！

async function postForm(){
	try{
		//验证码是否通过，拿到返回的json
		const response1 = await fetch('/#1...');
		const json1 = await response1.json();
		let json2;
		//对第一个请求的返回数据进行判断   满足条件则请求第二个接口并返回数据
		if(json1.respCode===200){
			const response2 = await fetch('/#2...');
			json2 = await response2.json();
		}
		return json2;
	}catch(e){
		console.log(e);
	}
}

简单的模拟场景

2.介绍下Promise，内部实现

答：promise从字面上理解就是承诺，即未来完成的事儿。从语法上来看，它是一个对象，从它这里可以获取下一步操作的消息，而promise对象的状态不受外部影响。

     原理（我是代码的搬运工~e）

const PENDING = 'pending'; //初始状态
const FULFILLED = 'fulfilled'; // 成功状态
const REJECTED = 'rejected'; // 失败状态
function Promise(extutor){
  let self = this;
  self.status = PENDING; // 设置状态
  // 存放成功回调的数组
  self.onResolveCallbacks = [];
  // 存放失败回调的数组
  self.onRejectedCallbacks = [];
  function resolve(value){
    if(self.status === PENDING){
      self.status = FULFILLED;
      self.value = value;
      self.onResolveCallbacks.forEach(cb => cd(self.value))
    }
  } 
  function reject(reason){
    if(self.status === PENDING){
      self.status = REJECTED;
      self.value = reason;
      self.onRejectCallbacks.forEach(cb => cd(self.value))
    }
  } 
  try{
    excutor(resolve, reject)
  } catch(e) {
    reject(e)
  }
}

3.清除浮动

答：首先，我们来讨论下，浮动的本质是什么？ 浮动是个带有方位的display:inline-block属性。