记录一些面试的题目

38 阅读5分钟

一、在切换Tab页时如何中断请求?

当时回答的是使用axios中的cancel方法,但是原理不是很了解。 总结网上搜到的一些方法:

  • 使用 中断调用链 或 中断 promise 来模拟请求的中断。中断调用链是在 then 方法中抛出一个特殊的错误,然后在 catch 方法中捕获并忽略。中断 promise 是在 promise 中创建一个 abort 方法,然后在外部调用该方法来改变 promise 的状态。
  • 使用 Axios 的 CancelToken。Axios 是一个基于 promise 的 HTTP 库,它提供了 CancelToken 类,可以用来创建取消令牌。通过传递取消令牌给 axios 请求,可以在任何时候取消请求。

二、Blob、File、ArrayBuffer的区别,同时如何操作ArrayBuffer

由于面试过程比较紧张,忘记说File是Blob的一种了。

  • Blob:是Binary Large Object的缩写,表示二进制大对象,是一个不可变的类文件对象,可以存储任意类型的数据。Blob有两个属性:size表示数据的大小,type表示数据的MIME类型。Blob有一个方法:slice表示对数据进行分割。Blob可以通过构造函数new Blob(array, options)来创建,其中array是一个包含ArrayBuffer, ArrayBufferView, Blob, DOMString等对象的数组,options是一个可选的对象,可以指定type和endings属性

  • File:是特殊类型的Blob,继承了Blob的属性和方法,并且增加了name和lastModified属性。name表示文件的名称,lastModified表示文件的最后修改时间。File可以通过构造函数new File(array, name, options)来创建,其中array和options与Blob相同,name是一个字符串,表示文件名。File通常通过元素或者拖放操作来获取

  • ArrayBuffer:是一种用于存储二进制数据的低级容器,它只是一段连续的内存空间,并不能直接操作其中的内容。为了读写ArrayBuffer中的数据,需要使用视图(TypedArray)或缓冲区(DataView)来操作。ArrayBuffer有一个属性:byteLength表示数据的字节长度。ArrayBuffer有一个方法:slice表示对数据进行分割。ArrayBuffer可以通过构造函数new ArrayBuffer(length)来创建,其中length是一个整数,表示分配的字节数。

  • 操作ArrayBuffer:有以下几种方式:

    • 使用视图(TypedArray):视图是一种用于操作ArrayBuffer中特定类型数据的对象,它提供了一种类似于数组的接口来访问和修改数据。视图有多种类型,如Int8Array, Uint8Array, Float32Array等,分别表示不同的数据类型和字节长度。视图可以通过构造函数new TypedArray(buffer, byteOffset, length)来创建,其中buffer是一个ArrayBuffer对象,byteOffset是一个可选的整数,表示从buffer的哪个字节开始创建视图,默认为0,length是一个可选的整数,表示视图包含多少个元素,默认为buffer.byteLength - byteOffset除以每个元素占用的字节数。
    • 使用缓冲区(DataView):缓冲区是一种用于操作ArrayBuffer中任意类型数据的对象,它提供了一种底层的接口来访问和修改数据。缓冲区不关心数据的类型和字节序(大端或小端),而是通过指定偏移量和长度来读写数据。缓冲区可以通过构造函数new DataView(buffer, byteOffset, byteLength)来创建,其中buffer是一个ArrayBuffer对象,byteOffset是一个可选的整数,表示从buffer的哪个字节开始创建缓冲区,默认为0,byteLength是一个可选的整数,表示缓冲区占用多少个字节,默认为buffer.byteLength - byteOffset。缓冲区提供了一系列的get和set方法来读写不同类型和字节序的数据,如getInt8, setUint16等。
    • 使用Blob和FileReader:Blob和FileReader可以用来将ArrayBuffer转换为其他格式的数据,如字符串或DataURL等。Blob可以接受一个ArrayBuffer作为参数来创建一个Blob对象,FileReader可以读取一个Blob对象并返回指定格式的结果。例如,要将一个ArrayBuffer转换为字符串,

三、大文件的断点续传

之前刷掘金看到过,但是真记不住,年纪大了脑子不行了。

  • 分片上传:将大文件切割成多个小文件(分片),并给每个分片添加索引,然后依次上传每个分片,最后在服务器端合并所有分片。这样可以减少单次上传的数据量,提高上传效率,也可以实现暂停和恢复上传的功能。
  • 断点续传:在上传每个分片之前,先向服务器发送一个请求,检查该分片是否已经上传过,如果已经上传过,则跳过该分片,否则继续上传该分片。这样可以避免重复上传已经成功的分片,节省时间和流量,也可以实现在网络中断或其他异常情况下恢复上传的功能。
  • 秒传:在上传文件之前,先计算文件的MD5值(一种唯一标识文件内容的哈希值),然后向服务器发送一个请求,检查该MD5值是否已经存在于服务器中,如果已经存在,则表示该文件已经上传过,无需再次上传,直接返回成功的响应,否则继续执行分片上传和断点续传的逻辑。这样可以避免重复上传相同内容的文件,提高用户体验和服务器性能。

放个链接,侵权删:

后面再复盘复盘,想起来继续......