撩课-Web大前端每天5道面试题-Day18

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


①async---声明一个异步函数:
自动将常规函数转换成promise,返回值也是一个promise对象,
只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数,内部可以使用await; 
     
②await--暂停异步的功能执行:
放在promise调用之前,await强制其他代码等待,直到promise完成并返回结果,
只能与promise一起使用,不适用于回调,只能在async函数内部使用。
下面介绍下使用场景:
a.同时发出三个互不依赖的请求,
不建议使用

async/awaitasync 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对象的状态不受外部影响。

相关代码如下:

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.Http请求中的keep-alive有了解吗?


在http早期,每个http请求都要求打开一个tpc socket连接,
并且使用一次之后就断开这个tcp连接。
使用keep-alive可以改善这种状态,
即在一次TCP连接中可以持续发送多份数据而不会断开连接。
通过使用keep-alive机制,可以减少tcp连接建立次数,
也意味着可以减少TIME_WAIT状态连接,
以此提高性能和提高http服务器的吞吐率
(更少的tcp连接意味着更少的系统内核调用,socket的accept()和close()调用)。
但是,keep-alive并不是免费的午餐,长时间的tcp连接容易导致系统资源无效占用。
配置不当的keep-alive,有时比重复利用连接带来的损失还更大。
所以,正确地设置keep-alive timeout时间非常重要。

4.http中的状态码302代表的是什么意思?


302重定向表示临时性转移(Temporarily Moved ),
当一个网页URL需要短期变化时使用。
顺便提一嘴301301重定向/跳转一般,
表示本网页永久性转移到另一个地址。    
301是永久性转移(Permanently Moved),SEO常用的招式,
会把旧页面的PR等信息转移到新页面301重定向与302重定向的区别   
301重定向是永久的重定向,
搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。   
302重定向是临时的重定向,
搜索引擎会抓取新的内容而保留旧的网址。
因为服务器返回302代码,
搜索引擎认为新的网址只是暂时的。

5.请描述utf-8和unicode的区别?


Unicode 是「字符集」UTF-8 是「编码规则」Unicode是一套复杂的字符编码标准,
简单来说就是将人类使用的每个所谓字符与一个非负整数对应,
并且保证不同的字符对应的整数一定不同。
UTF-8是这个整数的编码方式,用1到4字节来表达一个整数。
关系:UTF-8是Unicode的实现方式之一,
它规定了字符如何在计算机中存储、传输等。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容