一、谷歌不相容的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()
      })
  }