关于那些没回答上来的问题（不定期更新）

zz888888888

已于 2024-03-08 12:22:28 修改

阅读量780

点赞数 17

分类专栏：面试文章标签：前端 javascript 开发语言

于 2024-02-29 18:10:34 首次发布

本文链接：https://blog.csdn.net/qq_59737146/article/details/136373752

版权

面试专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.对promise的理解以及使用场景

Promise是ES6引入的异步编程的处理方案，有三种状态：pending（进行中）、resolved（已完成）、rejected（已失败）。还有两个方法：then（成功的回调）、catch（失败的回调）。从语法上说，Promise是一个构造函数，可以实例化对象。封装异步操作，获取成功和失败的结果。

它的优点就是支持链式调用，可以解决回调地狱的问题，缺点就是无法中途取消promise。

使用场景：

promise.all

参数：接收可迭代对象，如Array

结果：

1.数组为空数组，则立即决议为成功执行resolve( );

2.数组中传递非 Promise 值时，它们会被视为已经完成的值，并作为一个数组返回给你；

3.当所有结果成功返回时按照请求顺序返回存储成功结果的数组;

4.当其中有一个失败方法时，则进入失败方法，返回失败的结果;

1)场景一：多个请求结果合并在一起（具体描述：一个页面，有多个请求，我们需求所有的请求都返回数据后再一起处理渲染）

2)场景二：合并请求结果并处理错误（具体描述：我们需求单独处理一个请求的数据渲染和错误处理逻辑，有多个请求，我们就需要在多个地方写）

3）场景三：验证多个请求结果是否都是满足条件（具体描述：在一个微信小程序项目中，做一个表单的输入内容安全验证，调用的是云函数写的方法，表单有多7个字段需要验证，都是调用的一个内容安全校验接口，全部验证通过则可以进行正常的提交）

promise.race

参数：接受可迭代对象，例如Array

返回值：race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），这要取决于第一个完成的方式是数组中的哪个。

1.数组为空数组，就不会执行，永远挂起；

2.如果迭代包含一个或多个非promise值或已解决/拒绝的promise，则 Promise.race 将返回最先完成的值（不管resolve还是reject)

1）场景一：图片请求超时

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
           resolve(img);
        }
        //img.src = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/logo.a7995ad.svg~tplv-t2oaga2asx-image.image"; 正确的
        img.src = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/logo.a7995ad.svg1~tplv-t2oaga2asx-image.image";
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

2）场景二：请求超时提醒（具体描述：有些时候，我们前一秒刷着新闻，下一秒进入电梯后，手机页面上就会提示你 “网络不佳”）

//请求
function request(){
    return new Promise(function(resolve, reject){
       setTimeout(()=>{
            resolve('请求成功')
       },4000)
    })
}

//请求超时提醒
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('网络不佳');
        }, 3000);
    });
    return p;
}



Promise.race([
    request(),
    timeout()
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)//网络不佳
})

promise.prototype.then

1)场景一：下个请求依赖上个请求的结果

function A(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('B依赖的数据')
        },300)
    })
}
function B(prams){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(prams + 'C依赖的数据')
        },500)
    })
}
function C(prams){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(prams)
        },1000)
    })
}

//我们期望的是走 try ，由于A B C模拟的请求中都是没有reject，用 try catch 捕获错误
try{
    A()
       .then( res=>B(res) )
       .then( res=>C(res) )
       .then( res=>{
        console.log(res)//B依赖的数据C依赖的数据
        })   
    } catch(e){
    
    }
}

2）场景二：中间件作用（具体描述：接口返回的数据量比较大，在一个then 里面处理显得臃肿，多个渲染数据分别给个then，让其各司其职）

//模拟后端返回的数据

let result = {
    bannerList:[
        {img:'轮播图地址'}
    //...
    ],
    storeList:[
        {name:'店铺列表'}
    //...
    ],
    categoryList:[
        {name:'分类列表'}
    //...
    ],
    //...
}

function getInfo(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(result)
        },500)
    })
}

getInfo().then(res=>{

    let { bannerList } = res
    //渲染轮播图
    console.log(bannerList)
    return res
}).then(res=>{
    
    let { storeList } = res
    //渲染店铺列表
    console.log(storeList)
    return res
}).then(res=>{
    let { categoryList } = res
    console.log(categoryList)
    //渲染分类列表
    
    return res
})

更详细的地址在这里：前端 Promise 常见的应用场景 - 掘金

2.vue、react的数据流分别是怎样的，有什么区别

Vue采用双向数据流的设计理念。这意味着数据可以从父组件流向子组件，并且子组件对数据的修改也可以反向影响父组件。这种数据流允许开发者更方便地实现组件间的数据同步。

React采用单向数据流的设计理念。这意味着数据只能由父组件流向子组件，而子组件不能直接修改父组件的数据。如果想要修改数据，需要通过回调函数的方式将修改后的数据传递给父组件。这种数据流模型使得数据变更的追踪更加明确，提高了应用的可维护性。

双向数据流和单项数据流的优缺点

双向数据流

优点：

简化了表单和用户输入数据的处理，使得开发更为便捷。
数据的同步性更好，能够及时反映出组件之间的依赖关系。

缺点：

对于复杂的应用，数据流可能变得难以追踪和理解，特别是当多个组件存在相互依赖的情况下。
双向绑定可能导致性能问题，因为每次数据变动都需要通知相关组件进行更新。

单向数据流

优点：

数据流明确，易于追踪和理解，降低了应用的复杂度。
相比双向数据流，在处理大型应用时更易于维护和调试。
可以更好地控制组件间的数据流动，提高代码的可测试性。

缺点：

在处理表单和用户输入数据时需要编写额外的逻辑来实现数据的修改和同步。
某些情况下，可能需要通过多层嵌套组件传递相同的数据，增加了开发的复杂度。

总的来说，双向数据流适合简单的表单和用户输入场景，而单向数据流适用于复杂的应用场景，对于大型应用的维护和扩展更加友好。具体选择哪种数据流模型取决于项目的需求和开发团队的偏好。

具体使用代码的区别

Vue双向数据示例

在Vue中，我们可以使用v-model指令来实现双向数据绑定。上述例子中，输入框的值会与message变量进行双向数据绑定。

<template>
  <div>
    <h1>{{ message }}</h1>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

React单向数据流示例

在React中，我们使用useStatehook来管理组件的状态。上述例子中，输入框的值由message状态控制，并通过onChange事件回调函数修改message的值。

import React, { useState } from 'react';

function App() {
  const [message, setMessage] = useState('Hello, React!');

  const handleChange = (event) => {
    setMessage(event.target.value);
  };

  return (
    <div>
      <h1>{message}</h1>
      <input type="text" value={message} onChange={handleChange} />
    </div>
  );
}

export default App;

3.跨域是什么，怎么解决，详细讲一下CORS

跨域：当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

解决方法：

JSONP：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。（主要就是利用了 script 标签没有跨域限制的这个特性来完成的）
Nginx反向代理：需要配置nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器即可。（利用服务端请求不会跨域的特性，让接口和当前站点同域）

CORS:

普通跨域请求：只需服务器端设置Access-Control-Allow-Origin

带cookie跨域请求：前后端都需要进行设置

【前端设置】根据xhr.withCredentials字段判断是否带有cookie

// 前端设置是否带cookie
xhr.withCredentials = true

【服务端设置】Access-Control-Allow-Credentials

// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true");

document.domain（解决无法读取非同源网页的 Cookie问题）

只要通过设置相同的document.domain，两个页面就可以共享Cookie（此方案仅限主域相同，子域不同的跨域应用场景。）

// 两个页面都设置
document.domain = 'test.com';

更多请看什么是跨域？及7种跨域解决方法 - 简书

10 种跨域解决方案（附终极方案）

CORS解决跨域

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，
IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

两种请求：简单请求和非简单请求

需要同时满足下面两种条件：

请求方法是以下三种方法之一：
HEAD
GET
POST
HTTP的头信息不能超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

这是为了兼容表单（form），因为历史上表单一直可以发出跨域请求。AJAX 的跨域设计就是，只要表单可以发，AJAX 就可以直接发。
凡是不同时满足下面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

具体请看跨域问题详解：CORS问题+解决办法_cors unblock-CSDN博客