Skip to content
On this page

js请求相关问题

获取图片上传进度

  1. 参考链接:

    XHR 简介

    深入理解 ajax 系列第一篇——XHR 对象

    XMLHttpRequest

    使用原生 JS 或 jquery ajax 获取上传图片实时进度

    JS、JQ 实现图片上传,文件上传、带进度条上传的几种方法

    前端面试手写题有备无患

  2. 详解:

    • 常用只读属性:

      (1) XMLHttpRequest.readyState 返回 unsigned short,状态码:

      • 0 UNSENT 代理被创建,但尚未调用 open() 方法。
      • 1 OPENED open() 方法已经被调用。
      • 2 HEADERS_RECEIVED send() 方法已经被调用,并且头部和状态已经可获得。
      • 3 LOADING 下载中,responseText 属性已经包含部分数据。
      • 4 DONE 下载操作已完成。

      (2) XMLHttpRequest.response 返回 ArrayBuffer、Blob、Document、DOMString,具体是哪种类型取决于 XMLHttpRequest.responseType 的值。其中包含响应体 body。

      (3)XMLHttpRequest.responseText 返回 string 或 null

      (4)XMLHttpRequest.responseURL 返回响应的序列化 URL

      (5)XMLHttpRequest.responseXML 返回一个 Document,其中包含该请求的响应

      • 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的 XML DOM 文档(document 形式)

      (6)XMLHttpRequest.status 返回 unsigned short,请求响应状态

      • UNSENT(未发送) 0
      • OPENED(已打开) 0
      • LOADING(载入中) 200
      • DONE(完成) 200

      (7)XMLHttpRequest.statusText 返回 string,响应状态文本

      • UNSET
      • OPENED
      • LOADING
      • DONE
      • OK
      • Not Found
    • 常用属性:

      (1) XMLHttpRequest.responseType 响应数据的类型:text、arraybuffer、blob、document、json

    • 常用方法:

      (1)XMLHttpRequest.abort() 中止请求

      (2)XMLHttpRequest.getAllResponseHeaders() 返回所有用 CRLF 分隔的响应头,string 或 null

      javascript
      var request = new XMLHttpRequest();
      request.open("GET", "foo.txt", true);
      request.send();
      
      request.onreadystatechange = function() {
      if(this.readyState == this.HEADERS_RECEIVED) {
      
          // Get the raw header string
          var headers = request.getAllResponseHeaders();
      
          // Convert the header string into an array
          // of individual headers
          var arr = headers.trim().split(/[\r\n]+/);
      
          // Create a map of header names to values
          var headerMap = {};
          arr.forEach(function (line) {
              var parts = line.split(': ');
              var header = parts.shift();
              var value = parts.join(': ');
              headerMap[header] = value;
          });
      
          var contentType = headerMap["content-type"];//text/html; charset=utf-8
      }
      
      /*
      date: Fri, 08 Dec 2017 21:04:30 GMT\r\n
      content-encoding: gzip\r\n
      x-content-type-options: nosniff\r\n
      server: meinheld/0.6.1\r\n
      x-frame-options: DENY\r\n
      content-type: text/html; charset=utf-8\r\n
      connection: keep-alive\r\n
      strict-transport-security: max-age=63072000\r\n
      vary: Cookie, Accept-Encoding\r\n
      content-length: 6502\r\n
      x-xss-protection: 1; mode=block\r\n
      */

      (3)XMLHttpRequest.getResponseHeader(name) 返回包含指定响应头的字符串,string 或 null,name 如"Content-Type"

      (4)XMLHttpRequest.open(method, url, async, user, password) 初始化一个请求

      • method:get,post,put,delete
      • async:是否异步
      • user 和 password 用于认证

      (5)XMLHttpRequest.overrideMimeType() 重写由服务器返回的 MIME type,默认"text/xml"

      (6)XMLHttpRequest.send() 发送请求

      (7)XMLHttpRequest.setRequestHeader(header, value) 设置 HTTP 请求头的值

    • 事件:

      (1)onloadstart 开始

      (2)onprogress 数据传输进行中

      (3)onabort 终止

      (4)onerror 失败

      (5)onload 成功

      (6)ontimeout 超时

      (7)onloadend 完成(不论成功与否)

      (8)onreadystatechange readyState 属性发生变化

    • 获取上传图片实时进度

    javascript
    $.ajax({
      url: "URL",
      type: "POST",
      data: data,
      processData: false, //用来回避jquery对formdata的默认序列化,XMLHttpRequest会对其进行正确处理
      contentType: false, //设为false才会获得正确的conten-Type
      xhr: function () {
        //用以显示上传进度
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
          xhr.upload.addEventListener(
            "progress",
            function (event) {
              var percent = Math.floor((event.loaded / event.total) * 100);
              $("#progress .progress-item").css("width", percent + "%");
            },
            false
          );
        }
      },
      success: function (data) {},
    });
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "url");
    // 上传完成后的回调函数
    xhr.onreadystatechange = function () {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.log("上传出错");
      }
    };
    // 获取上传进度
    xhr.upload.onprogress = function (event) {
      console.log(event.loaded);
      console.log(event.total);
      if (event.lengthComputable) {
        var percent = Math.floor((event.loaded / event.total) * 100);
        document.querySelector("#progress .progress-item").style.width =
          percent + "%";
        // 设置进度显示
        console.log(percent);
      }
    };
    xhr.send(data);
    • 实现 ajax
    javascript
    function ajax({ url, methods, body, headers }) {
      return new Promise((resolve, reject) => {
        let request = new XMLHttpRequest();
        request.open(url, methods);
        for (let key in headers) {
          let value = headers[key];
          request.setRequestHeader(key, value);
        }
        request.onreadystatechange = () => {
          if (request.readyState === 4) {
            if (request.status >= "200" && request.status < 300) {
              resolve(request.responeText);
            } else {
              reject(request);
            }
          }
        };
        request.send(body);
      });
    }

websocket

  1. 参考链接:
  1. 详解
  • 概念

    HTTP 协议通信只能由客户端发起,做不到服务器主动向客户端推送信息,而轮询的效率低,浪费资源,因为必须不停连接,或者 HTTP 连接始终打开,所以产生 websocket,使客户端和服务器能平等对话。

    WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。WebSocket连接必须由浏览器发起,因为请求协议是一个标准的HTTP请求。

    客户端请求

    GET ws://localhost:3000/ws/chat HTTP/1.1
    Host: localhost
    Upgrade: websocket
    Connection: Upgrade
    Origin: http://localhost:3000
    Sec-WebSocket-Key: client-random-string
    Sec-WebSocket-Version: 13

    服务端响应

    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: server-random-string
  • 原理

    客户端向 WebSocket 服务器通知(notify)一个带有所有接收者ID(recipients IDs)的事件(event),服务器接收后立即通知所有活跃的(active)客户端,只有ID在接收者ID序列中的客户端才会处理这个事件。​

  • 特点

    1. 支持双向通信,实时性更强
    2. 可以发送文本,也可以发送二进制数据‘’
    3. 建立在TCP协议之上,服务端的实现比较容易
    4. 数据格式比较轻量,性能开销小,通信高效
    5. 没有同源限制,客户端可以与任意服务器通信
    6. 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL
    7. 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
  • 与http不同之处

    • GET 请求的地址不是类似/path/,而是以 ws://开头的地址;
    • 请求头 Upgrade: websocket 和 Connection: Upgrade 表示这个连接将要被转换为 WebSocket 连接;
    • Sec-WebSocket-Key 是用于标识这个连接,并非用于加密数据;
    • Sec-WebSocket-Version 指定了 WebSocket 的协议版本。
  • 比http优势

    • 客户端与服务器只需要一个 TCP 连接,比 http 长轮询使用更少的连接
    • webSocket 服务端可以推送数据到客户端
    • 更轻量的协议头,减少数据传输量
  • js 使用方法

    javascript
    var ws = new WebSocket("wss://echo.websocket.org");
    
    switch (ws.readyState) {
      case WebSocket.CONNECTING:
        // 值为0,表示正在连接
        break;
      case WebSocket.OPEN:
        // 值为1,表示连接成功,可以通信了
        break;
      case WebSocket.CLOSING:
        // 值为2,表示连接正在关闭
        break;
      case WebSocket.CLOSED:
        // 值为3,表示连接已经关闭,或者打开连接失败
        break;
      default:
        // this never happens
        break;
    }
    
    //连接成功后的回调函数
    ws.onopen = function (event) {
      console.log("Connection open ...");
      ws.send("Hello WebSockets!"); //向服务器发送数据
      //发送blob
      var file = document.querySelector('input[type="file"]').files[0];
      ws.send(file);
      //发送binary
      var img = canvas_context.getImageData(0, 0, 400, 320);
      var binary = new Uint8Array(img.data.length);
      for (var i = 0; i < img.data.length; i++) {
        binary[i] = img.data[i];
      }
      ws.send(binary.buffer);
    
      //webSocket.bufferedAmount未发送至服务器的字节数
      var data = new ArrayBuffer(10000000);
      socket.send(data);
      if (socket.bufferedAmount === 0) {
        // 发送完毕
      } else {
        // 发送还没结束
      }
    };
    //同上
    ws.addEventListener("open", function (event) {
      ws.send("Hello Server!");
    });
    
    //从服务器接受到信息时的回调函数
    ws.onmessage = function (event) {
      console.log("Received Message: " + event.data);
      //判断收到的文本类型
      if (typeof event.data === String) {
        console.log("Received data string");
      }
      if (event.data instanceof ArrayBuffer) {
        var buffer = event.data;
        console.log("Received arraybuffer");
      }
      ws.close(); //关闭当前链接
    };
    
    ws.onerror = function (event) {
      // handle error event
    };
    
    //连接关闭后的回调函数
    ws.onclose = function (event) {
      console.log("Connection closed.");
      var code = event.code;
      var reason = event.reason;
      var wasClean = event.wasClean;
    };
  • 鉴权授权

    登录后发放jwt令牌,在连接建立时,检查令牌信息,在每次接收到消息时,检查连接是否已授权过,及授权是否过期,令牌不合法则服务端主动关闭socket连接

    如何防范重放攻击?

    • 可以每次接收信息都更新令牌
    • 可以结合redis,实现 ratelimit,防止高频刷接口,这个可以参考 express-rate-limit
    • 为防止中间人,最好使用wss(TLS)
  • 分配房间

    通过对象保存房间信息,包括房间名、人数等。

    socket.join(room)记录对应房间

    socket.emit广播人员进出情况

  • WebSocket心跳及重连机制

    javascript
    var lockReconnect = false;//避免重复连接
    var wsUrl = "wss://echo.websocket.org";
    var ws;
    var tt;
    //页面初始化,先调用createWebSocket函数
    function createWebSocket() {
      try {
        ws = new WebSocket(wsUrl);
        init();
      } catch(e) {
        console.log('catch');
        reconnect(wsUrl);
      }
    }
    //调用init方法,该方法内把一些监听事件进行封装
    function init() {
      //当网络断开的时候,会先调用onerror,onclose事件可以监听到,会调用reconnect方法进行重连操作。
      ws.onclose = function () {
        console.log('链接关闭');
        reconnect(wsUrl);
      };
      ws.onerror = function() {
        console.log('发生异常了');
        reconnect(wsUrl);
      };
      //正常的情况下,是先调用onopen方法的,当接收到数据时,会被onmessage事件监听到。
      ws.onopen = function () {
        //心跳检测重置
        heartCheck.start();
      };
      ws.onmessage = function (event) {
        //拿到任何消息都说明当前连接是正常的
        console.log('接收到消息');
        heartCheck.start();
      }
    }
    //如果网络断开的话,会执行reconnect方法,使用了一个定时器,4秒后会重新创建一个新的websocket链接,重新调用createWebSocket函数,重新会执行及发送数据给服务器端。
    function reconnect(url) {
      if(lockReconnect) {
        return;
      };
      lockReconnect = true;
      //没连接上会一直重连,设置延迟避免请求过多
      tt && clearTimeout(tt);
      tt = setTimeout(function () {
        createWebSocket(url);
        lockReconnect = false;
      }, 4000);
    }
    //心跳检测
    //每隔一段固定的时间,向服务器端发送一个ping数据,如果在正常的情况下,服务器会返回一个pong给客户端,如果客户端通过onmessage事件能监听到的话,说明请求正常
    var heartCheck = {
      timeout: 3000,
      timeoutObj: null,
      serverTimeoutObj: null,
      start: function(){
        console.log('start');
        var self = this;
        this.timeoutObj && clearTimeout(this.timeoutObj);
        this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
        this.timeoutObj = setTimeout(function(){
          //这里发送一个心跳,后端收到后,返回一个心跳消息,
          console.log('55555');
          ws.send("123456789");
          self.serverTimeoutObj = setTimeout(function() {
            console.log(111);
            console.log(ws);
            //我们使用了一个定时器,每隔3秒的情况下,如果是网络断开的情况下,在指定的时间内服务器端并没有返回心跳响应消息,因此服务器端断开了,因此这个时候我们使用ws.close关闭连接,在一段时间后可以通过 onclose事件监听到。因此在onclose事件内,我们可以调用 reconnect事件进行重连操作。
            ws.close();
            // createWebSocket();
          }, self.timeout);
    
        }, this.timeout)
      }
    }
    createWebSocket(wsUrl);
  • nodejs 使用方法

    javascript
    var express = require("express");
    var app = express();
    var http = require("http").Server(app);
    var io = require("socket.io")(http);
    
    io.on("connection", function (socket) {
      socket.on("disconnect", function () {
        //监听用户退出
      });
      socket.on("message", function (clientMessage) {
        //监听用户发布聊天内容
      });
      socket.on("join", function (userName) {
        //用户加入房间
      });
      socket.on("disconnect", function () {
        //用户离开房间
      });
    });

即时通讯

  1. 参考链接:
  1. 详解

  2. 短轮询

浏览器每隔一段时间向浏览器发送 http 请求,服务器端在收到请求后,不论是否有数据更新,都直接进行响应。

这种方式实现的即时通信,本质上还是浏览器发送请求,服务器接受请求的一个过程,通过让客户端不断的进行请求,使得客户端能够模拟实时地收到服务器端的数据的变化。

这种方式的优点是比较简单,易于理解。

缺点是这种方式由于需要不断的建立 http 连接,严重浪费了服务器端和客户端的资源。当用户增加时,服务器端的压力就会变大,这是很不合理的。
  1. 长轮询
首先由客户端向服务器发起请求,当服务器收到客户端发来的请求后,服务器端不会直接进行响应,而是先将这个请求挂起,然后判断服务器端数据是否有更新。

如果有更新,则进行响应,如果一直没有数据,则到达一定的时间限制才返回。

客户端 JavaScript 响应处理函数会在处理完服务器返回的信息后,再次发出请求,重新建立连接。

长轮询和短轮询比起来,它的优点是明显减少了很多不必要的 http 请求次数,相比之下节约了资源。

长轮询的缺点在于,连接挂起也会导致资源的浪费。
  1. SSE长连接
服务器使用流信息向服务器推送信息。

严格地说,http 协议无法做到服务器主动推送信息。

但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息。

也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。

这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。

SSE 就是利用这种机制,使用流信息向浏览器推送信息。

它基于 http 协议,目前除了 IE/Edge,其他浏览器都支持。

它相对于前面两种方式来说,不需要建立过多的 http 请求,相比之下节约了资源。
  1. WebSocket
该协议允许由服务器主动的向客户端推送信息。

使用 WebSocket 协议的缺点是在服务器端的配置比较复杂。

WebSocket 是一个全双工的协议,也就是通信双方是平等的,可以相互发送消息,而 SSE 的方式是单向通信的,只能由服务器端向客户端推送信息,如果客户端需要发送信息就是属于下一个 http 请求了。
  • 上面的四个通信协议,前三个都是基于HTTP协议的。

  • 性能排序

    WebSocket > 长连接(SEE) > 长轮询 > 短轮询

  • 兼容性

    短轮询 > 长轮询 > 长连接(SEE) > WebSocket

js异步加载

  1. 参考链接:

  2. 详解

    <script> 标签中增加 async(html5) 或者 defer(html4) 属性,脚本就会异步加载。

    &lt;script src="../XXX.js"defer></script>

    动态创建 script 标签,并且添加到文档中,JS 文件才会开始下载。

    defer 和 async 的区别在于:

    • defer 要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),在 window.onload 之前执行;

    • async 一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。

    • 如果有多个 defer 脚本,会按照它们在页面出现的顺序加载

    • 多个 async 脚本不能保证加载顺序

    普通script/defer/async对比

    • 普通

      normalScript

      先渲染页面,遇到js则中断渲染页面,下载js,先遇到则先下载,上个js未下载完,下个js可并发下载,先下载的先执行,所有执行完后继续渲染页面,触发DOMContentLoaded

    • defer

      deferScript

      先渲染页面,遇到js则并行下载至所有js下载完,中断渲染页面,按先后执行js,触发DOMContentLoaded

      应用场景:代码依赖DOM或其它js依赖此js,要求DOM解析完毕才执行js,如评论框、代码语法高亮、polyfill

    • async

      asyncScript

      先渲染页面,遇到js则并行下载至其中一个js下载完成,中断渲染页面至这个js执行完成,执行过程并行下载其它js,页面只在非js执行过程中渲染,继续渲染页面,触发DOMContentLoaded

      应用场景:不关心DOM,不被其它js依赖,如百度统计

url的含义

  1. 参考链接

    百度百科

  2. 详解

    http/https 连接协议

    .com/.cn/.net 一级域名

    .com.cn/baidu.com 二级域名

    baike.baidu.com 三级域名

    :8080 端口号

    /a/b/c 路由

    ?key=value&a=b 页面参数

    #tag 标签

跨域

  1. 参考链接

简单的 jsonp 实现 promise

简单透彻理解 JSONP 原理及使用

同源策略和跨域解决方案

HTTP访问控制(CORS)

localhost:3000 与 localhost:5000 的 cookie 信息是否共享

「2021」高频前端面试题汇总之浏览器原理篇

  1. 详解
  • 同源策略

    同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。跨域请求会被拒绝。同源性的 3 个条件:同协议、同域名、同端口。

    • 主要限制了三个方面:

      • 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
      • 当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
      • 当前域下 ajax 无法发送跨域请求。
  • 不受同源策略限制的

    a/script/img/iframe

  • 受到部分限制的

    cookie同ip不同端口,可共享,例如localhost:3000 与 localhost:5000 的 cookie 信息可共享

  • 完全受同源策略限制

    LocalStorage、IndexDB、Ajax

  • 跨域资源共享CORS

    允许浏览器向跨源服务器,发出XMLHttpRequest或Fetch请求,前提是浏览器必须支持这个功能,并且服务器端也必须同意这种"跨域"请求。

    • 服务器配置:

      • Access-Control-Allow-Origin
      • Access-Control-Allow-Methods
      • Access-Control-Allow-Headers
      • Access-Control-Allow-Credentials
      • Access-Control-Max-Age

      发起跨域请求时,如果是简单请求,则不会触发预检,直接发出正常请求。如果是非简单请求,浏览器会帮我们自动触发预检请求,也就是 OPTIONS 请求,用于确认目标资源是否支持跨域,可以避免跨域请求对服务器的用户数据产生未预期的影响。

    • 简单请求(满足以下所有条件)

      • method:get/post/head
      • 除了被用户代理自动设置的首部字段(例如 Connection ,User-Agent)和在 Fetch 规范中定义为 禁用首部名称 的其他首部,允许人为设置的字段为 Fetch 规范定义的 对 CORS 安全的首部字段集合。该集合为:
        • Accept
        • Accept-Language
        • Content-Language
        • Content-Type 值仅限于下列三者之一:
          • text/plain
          • multipart/form-data
          • application/x-www-form-urlencoded
        • DPR
        • Downlink
        • Save-Data
        • Viewport-Width
        • Width
        • Last-Event-ID

      若不满足以上条件,就属于非简单请求了。

    • 简单请求过程

      对于简单请求,浏览器会直接发出CORS请求,它会在请求的头信息中增加一个Orign字段,该字段用来说明本次请求来自哪个源(协议+端口+域名),服务器会根据这个值来决定是否同意这次请求。如果Orign指定的域名在许可范围之内,服务器返回的响应就会多出以下信息头:

      Access-Control-Allow-Origin: http://api.bob.com  // 和Orign一直
      Access-Control-Allow-Credentials: true   // 表示是否允许发送Cookie
      Access-Control-Expose-Headers: FooBar   // 指定返回其他字段的值
      Content-Type: text/html; charset=utf-8   // 表示文档类型

      如果Orign指定的域名不在许可范围之内,服务器会返回一个正常的HTTP回应,浏览器发现没有上面的Access-Control-Allow-Origin头部信息,就知道出错了。这个错误无法通过状态码识别,因为返回的状态码可能是200。

      在简单请求中,在服务器内,至少需要设置字段:Access-Control-Allow-Origin

    • 非简单请求过程

      非简单请求是对服务器有特殊要求的请求,比如请求方法为DELETE或者PUT等。非简单请求的CORS请求会在正式通信之前进行一次HTTP查询请求,称为预检请求。

      浏览器会询问服务器,当前所在的网页是否在服务器允许访问的范围内,以及可以使用哪些HTTP请求方式和头信息字段,只有得到肯定的回复,才会进行正式的HTTP请求,否则就会报错。

      预检请求使用的请求方法是OPTIONS,表示这个请求是来询问的。他的头信息中的关键字段是Orign,表示请求来自哪个源。除此之外,头信息中还包括两个字段:

      (1)Access-Control-Request-Method:该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法。

      (2)Access-Control-Request-Headers: 该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段。

      服务器在收到浏览器的预检请求之后,会根据头信息的三个字段来进行判断,如果返回的头信息在中有Access-Control-Allow-Origin这个字段就是允许跨域请求,如果没有,就是不同意这个预检请求,就会报错。

      服务器回应的CORS的字段如下:

      Access-Control-Allow-Origin: http://api.bob.com  // 允许跨域的源地址
      Access-Control-Allow-Methods: GET, POST, PUT // 服务器支持的所有跨域请求的方法
      Access-Control-Allow-Headers: X-Custom-Header  // 服务器支持的所有头信息字段
      Access-Control-Allow-Credentials: true   // 表示是否允许发送Cookie
      Access-Control-Max-Age: 1728000  // 用来指定本次预检请求的有效期,单位为秒

      只要服务器通过了预检请求,在以后每次的CORS请求都会自带一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。

      在非简单请求中,至少需要设置以下字段:

      'Access-Control-Allow-Origin'
      'Access-Control-Allow-Methods'
      'Access-Control-Allow-Headers'
    • 减少OPTIONS请求次数

      OPTIONS请求次数过多就会损耗页面加载的性能,降低用户体验度。所以尽量要减少OPTIONS请求次数,可以后端在请求的返回头部添加:Access-Control-Max-Age:number。它表示预检请求的返回结果可以被缓存多久,单位是秒。该字段只对完全一样的URL的缓存设置生效,所以设置了缓存时间,在这个时间范围内,再次发送请求就不需要进行预检请求了。

    • CORS中传递Cookie的3个条件

      • 在请求中设置 withCredentials

        默认情况下在跨域请求,浏览器是不带 cookie 的。但是我们可以通过设置 withCredentials 来进行传递 cookie.

        javascript
        // 原生 xhr 的设置方式
        var xhr = new XMLHttpRequest();
        xhr.withCredentials = true;
        // axios 设置方式
        axios.defaults.withCredentials = true;
      • Access-Control-Allow-Credentials 设置为 true

      • Access-Control-Allow-Origin 设置为非 *

    • 跨域请求参考

      javascript
      var invocation = new XMLHttpRequest();
      var url = 'http://bar.other/resources/public-data/';
        
      function callOtherDomain() {
        if(invocation) {    
          invocation.open('GET', url, true);
          invocation.onreadystatechange = handler;
          invocation.send(); 
        }
      }
      var invocation = new XMLHttpRequest();

      如下是一个需要执行预检请求的 HTTP 请求

      javascript
      var url = 'http://bar.other/resources/post-here/';
      var body = '&lt;?xml version="1.0"?>&lt;person>&lt;name>Arun&lt;/name>&lt;/person>';
          
      function callOtherDomain(){
        if(invocation)
          {
            invocation.open('POST', url, true);
            invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
            invocation.setRequestHeader('Content-Type', 'application/xml');
            invocation.onreadystatechange = handler;
            invocation.send(body); 
          }
      }

      服务器收到浏览器跨域请求后,根据自身配置返回对应文件头。若未配置过任何允许跨域,则文件头里不包含 Access-Control-Allow-origin 字段,若配置过域名,则返回 Access-Control-Allow-origin + 对应配置规则里的域名的方式。

      浏览器根据接受到的 响应头里的 Access-Control-Allow-origin 字段做匹配:

      • 若无该字段,说明不允许跨域,抛出错误
      • 若有该字段,则对origin和referer域名做比对:
        • 如果同源,则说明可以跨域,浏览器接受该响应
        • 若不同源,则说明该域名不可跨域,浏览器不接受该响应,抛出错误。

      对于附带身份凭证的请求(带cookie:xhr.withCredentials = true),服务器不得设置 Access-Control-Allow-Origin 的值为“*”,否则请求将会失败。而将 Access-Control-Allow-Origin 的值设置为具体域名(如http://foo.example),则请求将成功执行。

  • jsonp

    jsonp 是前端跨域手段,利用 script 可跨域性,请求异域 js,带上回调函数名,异域服务器响应为 函数名(数据),这样只要本地即可收到函数传入的数据。

    • 实现

      • 原生js版

        javascript
        var script = document.createElement('script');
        script.type = 'text/javascript';
        // 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数
        script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
        document.head.appendChild(script);
        // 回调执行函数
        function handleCallback(res) {
            alert(JSON.stringify(res));
        }

        服务端返回

        javascript
        handleCallback({"success": true, "user": "admin"})
      • ajax 版

        javascript
        $.ajax({
          type: "get",
          async: false,
          url: "...",
          dataType: "jsonp",
          jsonp: "callback",
          jsonpCallback: "jsonhandle", //回调函数(参数值)
          success: function (data) {},
        });
      • promise 版

        javascript
        function p(url){
            let json;
            let script = '&lt;script id="jsonp" src="'+url+?callback=fn+'">&lt;/script>';
            window.fn = function(data){
                json = data;
            }
            //当script被插入文档中时,src中的资源就会开始加载
            $(body).append(script);
        
            return new Promise((resolve,reject)=>{
                $("#jsonp").on("load",function(e){
                    resolve(json);
                })
                $("#jsonp").on("error",function(e){
                    reject(json);
                })
            });
        }
        p('http://localhost:8082').then(data=>{
            console.log(data);
            throw('err before then');
        }).catch(err => {
            //可以捕捉到then里的err befor then也可以捕捉到new Promise里的err in promise。
            console.log(err)
        });
      • Vue axios

        javascript
        this.$http = axios;
        this.$http.jsonp('http://www.domain2.com:8080/login', {
            params: {},
            jsonp: 'handleCallback'
        }).then((res) => {
            console.log(res); 
        })

        后端node.js代码

        javascript
        var querystring = require('querystring');
        var http = require('http');
        var server = http.createServer();
        server.on('request', function(req, res) {
            var params = querystring.parse(req.url.split('?')[1]);
            var fn = params.callback;
            // jsonp返回设置
            res.writeHead(200, { 'Content-Type': 'text/javascript' });
            res.write(fn + '(' + JSON.stringify(params) + ')');
            res.end();
        });
        server.listen('8080');
        console.log('Server is running at port 8080...');
  • postMessage

    • 详见 js基础语法问题.md -> iframe

    • 场景

      • 页面和其打开的新窗口的数据传递
      • 多窗口之间消息传递
      • 页面与嵌套的iframe消息传递
      • 上面三个场景的跨域数据传递
    • 用法

      postMessage(data,origin)

      • data: html5规范支持任意基本类型或可复制的对象,但部分浏览器只支持字符串,所以传参时最好用JSON.stringify()序列化。
      • origin: 协议+主机+端口号,也可以设置为"*",表示可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。
  • nginx代理跨域

    nginx代理跨域,实质和CORS跨域原理一样,通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

    1. nginx配置解决iconfont跨域

    浏览器跨域访问js、css、img等常规静态资源被同源策略许可,但iconfont字体文件(eot|otf|ttf|woff|svg)例外,此时可在nginx的静态资源服务器中加入以下配置。

    shell
    location / {
      add_header Access-Control-Allow-Origin *;
    }
    1. nginx反向代理接口跨域

    跨域问题:同源策略仅是针对浏览器的安全策略。

    服务器端调用HTTP接口只是使用HTTP协议,不需要同源策略,也就不存在跨域问题。

    实现思路:通过Nginx配置一个代理服务器域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域访问。

    shell
    #proxy服务器
    server {
        listen       81;
        server_name  www.domain1.com;
        location / {
            proxy_pass   http://www.domain2.com:8080;  #反向代理
            proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
            index  index.html index.htm;
            # 当用webpack-dev-server等中间件代理接口访问nignx时,此时无浏览器参与,故没有同源限制,下面的跨域配置可不启用
            add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时,可为*
            add_header Access-Control-Allow-Credentials true;
        }
    }
  • nodejs 中间件代理跨域

    node中间件实现跨域代理,原理大致与nginx相同,都是通过启一个代理服务器,实现数据的转发,也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名,实现当前域的cookie写入,方便接口登录认证。

    • 非vue框架的跨域 使用node + express + http-proxy-middleware搭建一个proxy服务器。

      前端

      javascript
      var xhr = new XMLHttpRequest();
      // 前端开关:浏览器是否读写cookie
      xhr.withCredentials = true;
      // 访问http-proxy-middleware代理服务器
      xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
      xhr.send();

      中间件服务器

      javascript
      var express = require('express');
      var proxy = require('http-proxy-middleware');
      var app = express();
      app.use('/', proxy({
          // 代理跨域目标接口
          target: 'http://www.domain2.com:8080',
          changeOrigin: true,
          // 修改响应头信息,实现跨域并允许带cookie
          onProxyRes: function(proxyRes, req, res) {
              res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
              res.header('Access-Control-Allow-Credentials', 'true');
          },
          // 修改响应信息中的cookie域名
          cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
      }));
      app.listen(3000);
      console.log('Proxy server is listen at port 3000...');
  • vue框架的跨域

    node + vue + webpack + webpack-dev-server搭建的项目,跨域请求接口,直接修改webpack.config.js配置。开发环境下,vue渲染服务和接口代理服务都是webpack-dev-server同一个,所以页面与代理接口之间不再跨域。

    webpack.config.js

    javascript
    module.exports = {
        entry: {},
        module: {},
        ...
        devServer: {
            historyApiFallback: true,
            proxy: [{
                context: '/login',
                target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
                changeOrigin: true,
                secure: false,  // 当代理某些https服务报错时用
                cookieDomainRewrite: 'www.domain1.com'  // 可以为false,表示不修改
            }],
            noInfo: true
        }
    }
  • document.domain + iframe跨域

    此方案仅限主域相同,子域不同的跨域应用场景。实现原理:两个页面都通过js强制设置document.domain为基础主域,就实现了同域。

    父窗口:(domain.com/a.html)

    html
    &lt;iframe id="iframe" src="http://child.domain.com/b.html">&lt;/iframe>
    &lt;script>
        document.domain = 'domain.com';
        var user = 'admin';
    &lt;/script>

    子窗口:(child.domain.com/a.html)

    html
    &lt;script>
        document.domain = 'domain.com';
        // 获取父窗口中变量
        console.log('get js data from parent ---> ' + window.parent.user);
    &lt;/script>
  • location.hash + iframe跨域

    实现原理:a欲与b跨域相互通信,通过中间页c来实现。 三个页面,不同域之间利用iframe的location.hash传值,相同域之间直接js访问来通信。

    具体实现:A域:a.html -> B域:b.html -> A域:c.html,a与b不同域只能通过hash值单向通信,b与c也不同域也只能单向通信,但c与a同域,所以c可通过parent.parent访问a页面所有对象。

    a.html:(domain1.com/a.html)

    html
    &lt;iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;">&lt;/iframe>
    &lt;script>
        var iframe = document.getElementById('iframe');
        // 向b.html传hash值
        setTimeout(function() {
            iframe.src = iframe.src + '#user=admin';
        }, 1000);
        
        // 开放给同域c.html的回调方法
        function onCallback(res) {
            alert('data from c.html ---> ' + res);
        }
    &lt;/script>

    b.html:(.domain2.com/b.html)

    html
    &lt;iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;">&lt;/iframe>
    &lt;script>
        var iframe = document.getElementById('iframe');
        // 监听a.html传来的hash值,再传给c.html
        window.onhashchange = function () {
            iframe.src = iframe.src + location.hash;
        };
    &lt;/script>

    c.html:(www.domain1.com/c.html)

    html
    &lt;script>
        // 监听b.html传来的hash值
        window.onhashchange = function () {
            // 再通过操作同域a.html的js回调,将结果传回
            window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
        };
    &lt;/script>
  • window.name + iframe跨域

    window.name属性的独特之处:name值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

    a.html:(domain1.com/a.html)

    javascript
    var proxy = function(url, callback) {
        var state = 0;
        var iframe = document.createElement('iframe');
        // 加载跨域页面
        iframe.src = url;
        // onload事件会触发2次,第1次加载跨域页,并留存数据于window.name
        iframe.onload = function() {
            if (state === 1) {
                // 第2次onload(同域proxy页)成功后,读取同域window.name中数据
                callback(iframe.contentWindow.name);
                destoryFrame();
            } else if (state === 0) {
                // 第1次onload(跨域页)成功后,切换到同域代理页面
                iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
                state = 1;
            }
        };
        document.body.appendChild(iframe);
        // 获取数据以后销毁这个iframe,释放内存;这也保证了安全(不被其他域frame js访问)
        function destoryFrame() {
            iframe.contentWindow.document.write('');
            iframe.contentWindow.close();
            document.body.removeChild(iframe);
        }
    };
    // 请求跨域b页面数据
    proxy('http://www.domain2.com/b.html', function(data){
        alert(data);
    });

    proxy.html:(domain1.com/proxy.html)中间代理页,与a.html同域,内容为空即可。

    b.html:(domain2.com/b.html)

    html
    &lt;script>    
        window.name = 'This is domain2 data!';
    &lt;/script>
  • WebSocket协议跨域

    WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信,同时允许跨域通讯,是server push技术的一种很好的实现。

    原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。

    前端

    html
    &lt;div>user input:&lt;input type="text">&lt;/div>
    &lt;script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js">&lt;/script>
    &lt;script>
    var socket = io('http://www.domain2.com:8080');
    // 连接成功处理
    socket.on('connect', function() {
        // 监听服务端消息
        socket.on('message', function(msg) {
            console.log('data from server: ---> ' + msg); 
        });
        // 监听服务端关闭
        socket.on('disconnect', function() { 
            console.log('Server socket has closed.'); 
        });
    });
    document.getElementsByTagName('input')[0].onblur = function() {
        socket.send(this.value);
    };
    &lt;/script>

    Nodejs socket后台

    javascript
    var http = require('http');
    var socket = require('socket.io');
    // 启动http服务
    var server = http.createServer(function(req, res) {
        res.writeHead(200, {
            'Content-type': 'text/html'
        });
        res.end();
    });
    server.listen('8080');
    console.log('Server is running at port 8080...');
    // 监听socket连接
    socket.listen(server).on('connection', function(client) {
        // 接收信息
        client.on('message', function(msg) {
            client.send('hello:' + msg);
            console.log('data from client: ---> ' + msg);
        });
        // 断开处理
        client.on('disconnect', function() {
            console.log('Client socket has closed.'); 
        });
    });

CORS指定多个域名

  1. 参考链接

    几个常见面试题,工作中也经常用到

  2. 详解

    根据请求头中的 Origin 来设置响应头 Access-Control-Allow-Origin:

    • 总是设置 Vary: Origin,避免 CDN 缓存破坏 CORS 配置

    • 如果请求头不带有 Origin,证明未跨域,则不作任何处理

    • 如果请求头带有 Origin,证明浏览器访问跨域,根据 Origin 设置相应的 Access-Control-Allow-Origin: Origin

    伪代码

    javascript
    // 获取 Origin 请求头
    const requestOrigin = ctx.get('Origin');
    
    ctx.set('Vary', 'Origin')
    
    // 如果没有,则跳过
    if (!requestOrigin) {
      return await next();
    }
    
    // 设置响应头
    ctx.set('Access-Control-Allow-Origin', requestOrigin)

ajax

  1. 参考链接

    Ajax 工作原理及实现步骤

    总结 - Ajax 工作原理和实现步骤

  2. 详解

    • 描述

      ajax 即为异步的 js 和 xml,在用户和服务器之间加了一个中间层,用于组装信息发送 http(s)请求和接收服务器响应

    • 实现

      javascript
      function ajax(url, data, method='POST', async=true) {
          return new Promise((resolve, reject) {
              // 第一步,创建xmlHttpRequest
              let xhr = new XMLHttpRequest()
      
              // 第二步,设置请求方式
              xhr.open(method, url, async)
              //设置需要返回的数据类型
              xhr.responseType = 'text';//json,blob,arrayBuffer
      
              // 第三步, 调用回调函数
              xhr.onreadyStateChange = function() {
                  //0初始化
                  //1请求已提出
                  //2请求已发送
                  //3请求处理中
                  //4请求已完成
                  if (xhr.readyState === 4) {
                      if (xhr.status === 200) {//服务器状态码
                          resolve(xhr.responseText)//响应文本
                          //responseXML响应XML/DOM
                          //responseBody响应主题
                          //responseStream响应数据流
                      } else {
                          reject(xhr.statusText)//状态码对应文本
                      }
                  } else {
                      reject(xhr.statusText)
                  }
              }
      
              // 第四步, 发送请求
              xhr.send(data)
              //abort()停止当前请求
              //getAllResponseHeaders()所有响应请求头以键值形式返回
              //getResponseHeader("header")返回指定头部值
              //setRequestHeader("header","value")设置请求头一起发送
          })
      }

async 和 await 的继发和并发问题

  1. 参考链接:

    浅谈 async/await

    async 函数的含义和用法

    面试向:Async/Await 代替 Promise.all()

    ECMAScript 6 入门

    Async/Await 替代 Promise 的 6 个理由

    字节跳动面试官:请用JS实现Ajax并发请求控制

  2. 详解:

    • async await

      • 改进 generator 语法,比 promise 更节约代码,能通过 try catch 处理 JSON.parse(await getJSON())错误,条件语句可不再嵌套在 then 中,解决继发执行处理回调嵌套问题(根据 promise1 的结果请求 promise2 的结果再请求 promise3 的结果),解决链式调用 then 无法找出错误地方的问题

      • async function(){} 表示函数内存在异步操作

      • async 自动将常规函数转换成 Promise,返回值也是一个 Promise 对象

      • await 必须在 async 函数内,如果 async 里面还有一层 function 使用 await,也需声明此函数为 async

      • await promise/function/其它,如果等待的不是 Promise 对象,则转 promise 后返回该值本身

      • await 强制下面代码等待,直到 Promise 对象 resolve(即使 await 其它,也需耗时),得到 resolve 的值作为 await 表达式的运算结果

        javascript
        //继发关系比较耗时
        async function dbFuc(db) {
          let foo = await getFoo();
          let bar = await getBar();
        }
        //应该采用并发
        async function dbFuc(db) {
          // 写法一
          let [foo, bar] = await Promise.all([getFoo(), getBar()]);
          // 写法二
          let fooPromise = getFoo();
          let barPromise = getBar();
          let foo = await fooPromise;
          let bar = await barPromise;
        }
        //完整样例
        let func1 = () => {
          return new Promise((res, rej) => {
            setTimeout(() => {
              res(1);
            }, 3000);
          });
        };
        let func2 = () => {
          return new Promise((res, rej) => {
            setTimeout(() => {
              res(2);
            }, 2000);
          });
        };
        let func3 = () => {
          return new Promise((res, rej) => {
            setTimeout(() => {
              res(3);
            }, 1000);
          });
        };
        let post = async () => {
          let f1Promise = func1();
          let f2Promise = func2();
          let f3Promise = func3();
          let f1 = await f1Promise;
          console.log(f1);
          let f2 = await f2Promise;
          console.log(f2);
          let f3 = await f3Promise;
          console.log(f3);
          return [f1, f2, f3];
        };
        window.onload = () => {
          post().then((data) => {
            console.log(data);
          });
        };

        带缓冲区的继发请求

        javascript
        let getResult = (time = 1000) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(time);
            }, time);
          });
        };
        let problem2 = (bufferCount, totalCount) => {
          let myTotalCount = totalCount;
          let myBufferCount = bufferCount;
          let result = [];
        
          //async await 带缓冲区继发请求,套娃无法错误重发
          let next = async () => {
            myBufferCount--;
            myTotalCount--;
            let response = await getResult(parseInt(Math.random() * 1000));
            result.push(response);
            myBufferCount++;
            console.log("next1", myBufferCount, myTotalCount, result);
            if (myTotalCount > 0) {
              next();
            }
          };
          let perform = async () => {
            myBufferCount--;
            myTotalCount--;
            console.log("perform1", myBufferCount, myTotalCount, result);
            let response = await getResult(parseInt(Math.random() * 1000));
            result.push(response);
            myBufferCount++;
            console.log("perform2", myBufferCount, myTotalCount, result);
            if (myTotalCount > 0) {
              next();
            }
          };
          for (let i = 0; i &lt; bufferCount; i++) {
            perform();
          }
        
          //promise 带缓冲区继发请求,套娃无法错误重发
          let cb = () => {
            console.log("call cb");
            myBufferCount--;
            myTotalCount--;
            getResult(parseInt(Math.random() * 1000)).then((data) => {
              result.push(data);
              myBufferCount++;
              console.log("cb1", myBufferCount, myTotalCount, result);
              if (myTotalCount > 0) {
                cb();
              }
            });
          };
          let post = () => {
            myBufferCount--;
            myTotalCount--;
            console.log("post1", myBufferCount, myTotalCount, result);
            getResult(parseInt(Math.random() * 1000)).then((data) => {
              result.push(data);
              myBufferCount++;
              console.log("post2", myBufferCount, myTotalCount, result);
              if (myTotalCount > 0) {
                cb();
              }
            });
          };
          for (let i = 0; i &lt; bufferCount; i++) {
            post();
          }
        
          //setInterval 带缓冲区继发请求,可错误重发,但速度没上面2种快
          let timer = setInterval(() => {
            if (myTotalCount &lt;= 0) {
              clearInterval(timer);
            }
            if (myBufferCount > 0 && myTotalCount > 0) {
              let response = getResult(parseInt(Math.random() * 1000));
              myBufferCount--;
              myTotalCount--;
              response.then((data) => {
                myBufferCount++;
                result.push(data);
                console.log(
                  2,
                  myBufferCount,
                  myTotalCount,
                  result,
                  result.length
                );
              });
            }
            console.log(1, myBufferCount, myTotalCount, result, result.length);
          }, 500);
        };
        problem2(3, 10);
        javascript
        function multiRequest(urls = [], maxNum) {
          // 请求总数量
          const len = urls.length;
          // 根据请求数量创建一个数组来保存请求的结果
          const result = new Array(len).fill(false);
          // 当前完成的数量
          let count = 0;
        
          return new Promise((resolve, reject) => {
            // 请求maxNum个
            while (count &lt; maxNum) {
              next();
            }
            function next() {
              let current = count++;
              // 处理边界条件
              if (current >= len) {
                // 请求全部完成就将promise置为成功状态, 然后将result作为promise值返回
                !result.includes(false) && resolve(result);
                return;
              }
              const url = urls[current];
              console.log(`开始 ${current}`, new Date().toLocaleString());
              fetch(url)
                .then((res) => {
                  // 保存请求结果
                  result[current] = res;
                  console.log(`完成 ${current}`, new Date().toLocaleString());
                  // 请求没有全部完成, 就递归
                  if (current &lt; len) {
                    next();
                  }
                })
                .catch((err) => {
                  console.log(`结束 ${current}`, new Date().toLocaleString());
                  result[current] = err;
                  // 请求没有全部完成, 就递归
                  if (current &lt; len) {
                    next();
                  }
                });
            }
          });
        }
      • 多个异步操作,可 await Promise.all

        javascript
        async function dbFuc(db) {
          let docs = [{}, {}, {}];
          let promises = docs.map((doc) => db.post(doc));
        
          let results = await Promise.all(promises);
          console.log(results);
        }
        
        async function dbFuc(db) {
          let docs = [{}, {}, {}];
          let promises = docs.map((doc) => db.post(doc));
        
          let results = [];
          for (let promise of promises) {
            results.push(await promise);
          }
          console.log(results);
        }
      • try/catch 可获取 async 函数内,任意 await 的错误,即可满足 其中一个被拒绝,即会暂停,并返回错误信息 的功能

        javascript
        async function asyncAlls(jobs) {
            try {
                // 循环执行
                let results = jobs.map(async job => await job)
                let res = []
                // 组合数组
                for (const result of results) {
                    res.push(await result)
                }
                return res
            } catch (error) {
                //处理error
                return error;//有一个reject,即到这里
            }
        }
        //也可此处处理error
        asyncAlls(jobs).catch((e)=>{...});
      • 失败重试maxRequest次再reject

        javascript
        function maxRequest(fn, maxNum) {
            return new Promise((resolve, reject) => {
                if (maxNum === 0) {
                    reject('max request number')
                    return
                }
                Promise.resolve(fn()).then(value => {
                    resolve(value)
                }).catch(() => {
                    return maxRequest(fn, maxNum - 1)
                })
            })
        }
      • async 函数实现

        javascript
        async function fn(args) {
          // ...
        }
        
        // 等同于
        function fn(args) {
          return spawn(function* () {
            // ...
          });
        }
        function spawn(genF) {
          //genF为*
          return new Promise(function (resolve, reject) {
            const gen = genF();
            function step(nextF) {
              let next;
              try {
                next = nextF();
              } catch (e) {
                return reject(e);
              }
              if (next.done) {
                return resolve(next.value);
              }
              Promise.resolve(next.value).then(
                function (v) {
                  step(function () {
                    return gen.next(v);
                  });
                },
                function (e) {
                  step(function () {
                    return gen.throw(e);
                  });
                }
              );
            }
            step(function () {
              return gen.next(undefined);
            });
          });
        }

fetch

  1. 参考链接

    设计模式|开箱即用的项目实战|封装fetch(1)

    fetch-util

    使用 Fetch

    Fetch

    Fetch API速查表:9个最常见的API请求

  2. 详解

    • 概念

      fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。

      fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

    • 用法

      javascript
      fetch(url, {
        body: JSON.stringify(data), // must match 'Content-Type' header
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, *omit
        headers: {
          'user-agent': 'Mozilla/4.0 MDN Example',
          'content-type': 'application/json'
        },
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
        redirect: 'follow', // manual, *follow, error
        referrer: 'no-referrer', // *client, no-referrer
      })
      .then(response => response.json()) // parses response to JSON
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
      javascript
      //使用Fetch API的简单GET请求
      fetch('{url}').then(response => console.log(response));
      //使用Fetch API的简单POST请求
      fetch('{url}', {
        method: 'post'
      }).then(response => console.log(response));
      //在Fetch API中使用授权令牌 (Bearer) 进行GET
      fetch('{url}', {
        headers: {
          'Authorization': 'Basic {token}'
        }
      }).then(response => console.log(response));
      //在Fetch API中使用查询字符串数据进行GET
      fetch('{url}?var1=value1&var2=value2').then(response => console.log(response));
      //在Fetch API中使用CORS进行GET
      fetch('{url}', {
        mode: 'cors'
      }).then(response => console.log(response));
      //在Fetch API中使用授权令牌和查询字符串数据进行POST
      fetch('{url}?var1=value1&var2=value2', {
        method: 'post',
        headers: {
          'Authorization': 'Bearer {token}'
        }
      }).then(response => console.log(response));
      //在Fetch API中使用表单数据进行POST
      let formData = new FormData();
      formData.append('field1', 'value1');
      formData.append('field2', 'value2');
      fetch('{url}', {
        method: 'post',
        body: formData
      }).then(response => console.log(response));
      //在Fetch API中使用JSON数据进行POST
      fetch('{url}', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          'field1': 'value1',
          'field2': 'value2'
        })
      })
      .then(response => console.log(response));
      //在Fetch API中使用JSON数据和CORS进行POST
      fetch('{url}', {
        method: 'post',
        mode: 'cors',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          'field1': 'value1',
          'field2': 'value2'
        })
      })
      .then(response => console.log(response));

      处理Fetch API请求的结果

      javascript
      fetch(...).then(response => {
        // process the response
      }
      async function getData(){
        let data = await fetch(...);
        // process the response
      }
      //检查Fetch API响应的状态码
      fetch(...).then(response => {
        if (response.status == 200){
          // all OK
        } else {
          console.log(response.statusText);
        }
      });
      //获取Fetch API响应的简单值
      var userId;
      fetch(...)
      .then(response => response.text())
      .then(id => {
          userId = id;
          console.log(userId)
      });
      //转换Fetch API响应的JSON数据
      var dataObj;
      fetch(...)
      .then(response => response.json())
      .then(data => {
          dataObj = data;
          console.log(dataObj)
      });
      //只有在两个Promises都解决后,你才能访问数据
      async function getData(){
          var dataObj;
          const response = await fetch(...);
          const data = await response.json();
          dataObj = data;
          console.log(dataObj);
      }
    • 封装

      javascript
      import qs from 'qs'//将url的参数转化为object对象
      
      class Fetch {
          constructor(config = {}) {
              const {
                  cache = 'no-cache', // * default, no-cache, reload, force-cache, only-if-cached
                  credentials = 'same-origin', // include, same-origin, *omit
                  headers = {},
                  mode = 'cors', // no-cors, cors, *same-origin
                  redirect = 'follow', // manual, *follow, error
                  referrer = 'no-referrer', // *client, no-referrer
                  timeOut = 3000, // 超时时间
                  BASE_URL = '',
                  requestType = 'JSON',
                  cacheType = ''
              } = config
              this.FetchConfig = {
                  cache,
                  credentials,
                  headers,
                  mode,
                  redirect,
                  referrer,
              }
              this.config = {
                  timeOut,
                  BASE_URL,
                  requestType,
              }
              this.cacheStorage = cacheType ? new Storage({ type: cacheType }) : ''
              this.dataOperation = {
                  JSON: {
                      headers: {
                          'Content-Type': 'application/json', // 告诉服务器,我们提交的数据类型为 json 格式
                      },
                      formatting(params) {
                          return JSON.stringify(params)
                      }
                  },
                  FormData: {
                      headers: {
                          'Content-Type': 'application/x-www-form-urlencoded' // 告诉服务器,我们提交的数据类型为 FormData 格式
                      },
                      formatting(params) {
                          let _formData = new FormData();
                          Object.keys(params).forEach(key => {
                              _formData.append(key, params[key]);
                          })
                          return _formData
                      }
                  }
              }
          }
      
          send({ url, params, method = "GET", headers }) {
              // 发送 ajax 请求
              const { BASE_URL } = this.config
              const ajax = new Promise((resolve) => {
                  fetch(BASE_URL ? `${BASE_URL}/${url}` : url, {
                      ...this.config,
                      body: params,
                      headers,
                      method,
                  }).then((response) => {
                      return response.json()
                  }).then((data) => {
                      resolve(data)
                  })
              })
              // 设置超时时间
              const time = new Promise((reject) => {
                  console.log(this.config.timeOut)
                  setTimeout(() => {
                      reject('time out')
                  }, this.config.timeOut);
              })
              return Promise.race([ajax, time])
          }
      
          preSend({ url, params, headers, method }) {
              const { requestType } = this.config
              const FetchConfig = {
                  ...this.FetchConfig,
                  method,
                  headers: {
                      ...this.dataOperation[requestType].headers,
                      ...headers
                  },
              };
              if (!!params) FetchConfig.body = this.dataOperation[requestType].formatting(params);
              return this.send({
                  url,
                  FetchConfig
              })
          }
      
          // Get 请求缓存配置
          get({ url, query, headers }) { // 优化 get 请求,添加缓存处理
              const key = query ? `${url}?${qs.stringify(query)}` : url
              if (this.cacheStorage) {
                  if (this.cacheStorage.getItem(key)) {
                      return Promise.resolve(this.cacheStorage.getItem(key))
                  } else {
                      return this.preSend({ url: key, headers, method: 'GET' }).then(data => {
                          this.cacheStorage.setItem(key, data)
                          return data
                      })
                  }
              } else {
                  return this.preSend({ url: key, headers, method: 'GET' })
              }
          }
      
          post({ url, query, params = {}, headers }) {
              return this.preSend({ url: query ? `${url}?${qs.stringify(query)}` : url, params, headers, method: 'POST' })
          }
      }
      
      const fetch = new Fetch({ requestType: "JSON", cacheType: 'local' });
      
      newFetch.get({
          url: 'https://api.github.com/users/octocat',
          params: {
              test: 1
          }
      }).then(data => {
          console.log(data)
      }).catch(err => {
          console.log(err)
      })
      
      class Storage {
          constructor(props) { // 根据类型跟缓存时间,初始化缓存方法
              const { type, time = 5000 } = props
              this.type = type
              this.time = time
              this.storageType = {
                  local: 'localStorage',
                  session: 'sessionStorage',
                  cookie: 'cookie',
                  indexDb: 'indexDb',
                  nomal: 'nomal'
              }
          }
      
          setItem(key, value) { // 代理原生缓存方法,添加缓存时间
              window[this.storageType[this.type]].setItem(key, JSON.stringify({
                  value,
                  time: new Date().getTime()
              }));
          }
      
          getItem(key) { // 代理原生获取缓存方法,根据缓存时间,判断数据是否过期
              try {
                  const { time, value } = JSON.parse(window[this.storageType[this.type]].getItem(key));
                  const now = new Date().getTime()
                  if (now > time + this.time) {
                      window[this.storageType[this.type]].removeItem(key);
                      return null
                  } else {
                      return value
                  }
              } catch (e) {
                  return null
              }
          }
      }

get/post请求方式

  1. 参考链接

    postman中 form-data、x-www-form-urlencoded、raw、binary的区别

    Postman使用知识整理(一):get传参,post传参

    12 道腾讯前端面试真题及答案整理

  2. 详解

    1. form-data

      multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件。当上传的字段是文件时,会有Content-Type来说明文件类型;content-disposition,用来说明字段的一些信息。

    2. x-www-form-urlencoded

      application/x-www-from-urlencoded,会将表单内的数据转换为键值对,&分隔。

      当form的action为get时,浏览器用x-www-form-urlencoded的编码方式,将表单数据编码为(name1=value1&name2=value2…),然后把这个字符串append到url后面,用?分隔,跳转到这个新的url。

      当form的action为post时,浏览器将form数据封装到http body中,然后发送到server。这个格式不能提交文件。

    3. raw

      可以上传任意格式的文本,可以上传text、json、xml、html等

    4. binary

      Content-Type:application/octet-stream,只可以上传二进制数据,一次只能上传一个文件

    5. none

      body不设置参数,可在params设置参数

    6. GraphQL

      一种用于API的查询语言。

    7. get/post请求传参长度有什么特点

    • HTTP 协议 未规定 GET 和POST的长度限制
    • GET的最大长度显示是因为 浏览器和 web服务器限制了 URI的长度
    • 不同的浏览器和WEB服务器,限制的最大长度不一样
    • 要支持IE,则最大长度为2083byte,若只支持Chrome,则最大长度 8182byte