【interview】2020.07.24 谷歌不兼容的 setImmediate、如何通过路由找到路由组件的、思考 axios 分析 Promise 封装 ajax

一、谷歌不兼容的 window.setImmediate()

在 MDN 上看 window.setImmediate() 描述

该方法可能不会被批准成为标准，目前只有最新版本的 Internet Explorer 和Node.js 0.10+实现了该方法。

它遇到了 Gecko(Firefox) 和Webkit (Google/Apple) 的阻力.

• 该特性是非标准的，所以说、请尽量不要在生产环境中使用它！
• 语法：

• var immediateID = setImmediate(func, [param1, param2, ...]);
  var immediateID = setImmediate(func);

  window.clearImmediate 方法可以用来取消通过 setImmediate 设置的将要执行的语句, 就像 window.clearTimeout 对应于 window.setTimeout一样.

因为其兼容性不好，所以会用 setTimeout(fn, 0) 来代替，常用来： 处理 繁重任务（数组操作等等）以避免 js 执行阻塞 ui 的更新

 

二、vue/react 是如何通过路由找到路由组件的？

通过配置 路由

编程时，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

根据y用户访问的 path 来切换到对应的组件

• mode: 'hash'

在 URL 后面添加 # 和 路由路径 path

当 # 和 后面的 path 值发生变化时，会触发 hashchange 事件，vue/react 会进行相应的 渲染逻辑，组件切换（挂载最新的虚拟 DOM 到 真实 DOM 容器中）

• mode: 'history'

会根据

• pushState 增加一条记录
• replaceState 替换一条记录

操作 浏览器的 history 对象

history 的变化 会触发 popstate 事件，vue/react 会进行相应的 渲染逻辑，组件切换（挂载最新的虚拟 DOM 到 真实 DOM 容器中）

以上两种方式都可以实现 无刷新跳转页面 的体验

只不过，

• history 模式需要 后端做相应的配置，避免 404 出现（前端方面，除了 mode 属性不一样，其他基本一致）
• history 模式的 url 更加简洁

 

三、思考 axios 分析 Promise 封装 ajax

• 原生 ajax

• //对请求data进行格式化处理
  function formateData(data) {
      let arr = [];
      for (let key in data) {
          //避免有&,=,?字符，对这些字符进行序列化
          arr.push(encodeURIComponent(key) + '=' + data[key])
      }
      return arr.join('&');
  }
  
  function ajax(params) {
      // 先对params进行处理，防止为空
      params = params || {};
      params.data = params.data || {};
  
      // 普通GET,POST请求
      params.type = (params.type || 'GET').toUpperCase();
      params.data = formateData(params.data);
      // 如果是在 ie6 浏览器，那么 XMLHttoRequest 是不存在的，应该调用 ActiveXObject；
      let xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      if (params.type === 'GET') {
          xhr.open(params.type, params.url + '?' + params.data, true);
          xhr.send();
      } else {
          xhr.open(params.type, params.url, true);
          xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
          xhr.send(params.data);
      }
      // 这里有两种写法，第一种写法：当xhr.readyState===4的时候，会触发onload事件，直接通过onload事件 进行回调函数处理
      xhr.onload = function () {
          if (xhr.status === 200 || xhr.status === 304 || xhr.status === 206) {
              var res;
  
              if (params.success && params.success instanceof Function) {
                  res = JSON.parse(xhr.responseText);
                  params.success.call(xhr, res);
              }
          } else {
              if (params.error && params.error instanceof Function) {
                  res = xhr.responseText;
                  params.error.call(xhr, res);
              }
          }
  
      }
      //第二种写法，当xhr.readyState===4时候，说明请求成功返回了，进行成功回调
      xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
              // 进行onload里面的处理函数
          }
      }
  
  }

  参考： https://juejin.im/post/5be4f163f265da61483b1b08

 

• axios

的自我介绍：

Promise based HTTP client for the browser and node.js

即： 我，axios，就是基于Promise,服务于浏览器和 node.js 的HTTP客户端。

特点：

基于 Promise

支持处理分发请求，并在返回的 Promise 一旦有响应被接收的情况下进行处理

简单版本封装

• function pajax({
      url= null,
      method = 'GET',
      dataType = 'JSON',
      async = true
  }){
      return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest()
          xhr.open(method, url, async)
          xhr.responseType = dataType
          xhr.onreadystatechange = () => {
              if(!/^[23]\d{2}$/.test(xhr.status)) return
              if(xhr.readyState === 4) {
                  let result = xhr.responseText
                  resolve(result)
              }
          }
          xhr.onerror = (err) => {
              reject(err)
          }
          xhr.send()
      })
  }