zoukankan      html  css  js  c++  java
  • 【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

    的自我介绍:

    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() }) }
      复制代码
  • 相关阅读:
    PLSQL Developer oracle导入导出表及数据
    Java之设计模式
    mySQL:两表更新(用一个表更新另一个表)的SQL语句
    Java中对图片文件的类型的获取
    JAVA判断文件的内容类型
    正确理解Mysql的列索引和多列索引
    eclipse快捷键
    C# 利用Jmail接收邮件
    github常见操作和常见错误!错误提示:fatal: remote origin already exists.
    css3特殊图形(气泡)
  • 原文地址:https://www.cnblogs.com/mailyuan/p/13381774.html
Copyright © 2011-2022 走看看