ajax和fetch、axios的區別以及axios原理

從原生的XHR到jquery ajax，再到現在的axios和fetch，究竟發生了哪些變化，我們接下來就來探討一下。

jquery ajax

它是對原生XHR的封裝，隨著vue、react框架的興起，很多情況下我們只需使用ajax可是卻要引入整個jquery，這是非常不合理。

$.ajax({
 type:'POST',
 url:url,
 data:data,
 dataType:dataType,
 success:function(){},
 error:funciton(){}
})

優點：響應快，使用方便。
缺點：

• 針對MVC的程式設計設計，不符合現在的MVVM趨勢
• 基於原生的XHR開發。
• JQuery較大，單純的使用ajax要引入這個檔案不合理。

fetch

fetch解決了使用ajax引入這個jquery檔案的問題。fetch號稱是ajax的替代品，它的API是基於Promise設計的。

//原生的XHR
var xhr=new XHRHttprequest();
xhr.open('GET',url);
xhr.onreadystatechange=funciton(){
 if(xhr.readyState===4&&xhr.status===200){
    console.log(xhr.responseText);
}
}
xhr.send()

//fetch
try {
  let response = await fetch(url);//await後面是個promise物件
  let data = await response.json();
  console.log(data);
} catch(e) {
  console.log("error:", e);
}

優勢：

• 更加底層，提供的API豐富。
• 脫離了XHR。
• 跨域處理（mode為‘no-cors’）
• 基於promise實現，支援async/await

fetch('/testPost', {
    method: 'post',
    mode: 'no-cors',
    data: {}
}).then(function() {});

缺點：

• fetch只有對網路請求報錯，對400,500都當作成功的請求，並不會reject。
• fetch預設不會帶cookie，需要新增配置項：fetch(url,{credentials:'include'})
• 所以 版本的IE均不支援原生Fetch。
• fetch不支援abort，不支援超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺執行，造成了流量的浪費

Axios

Vue2.0之後，Axios受到了更多人的關注。Axios本質是對原生XHR封裝,需要一個promise對返回的結果進行處理。

• 支援Promise API
• 將返回的資料自動轉化成JSON資料====transformResponse
• 可以取消請求====request.abort()
• 提供一些併發請求的介面。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

• 防止CSRF攻擊：每次請求都要帶一個從cookie中獲取的key值，根據同源策略，假冒的網站拿不到cookie中的key，後臺可以根據這個請求判斷是不是有人假冒，從而採取正確的策略。

axios({
  methods:'post',
  url:url,
  data:data

}).then((resopnse)=>{
  console.log(response)
}).catch((error)=>{
   console.log(error)
})

Axios的原理解讀

底層還是對XHR的封裝，只不過需要一個Promise物件對返回的結果進行處理。axios在瀏覽器端是和Ajax底層的原理一樣，都是通過XMLHttpRequest物件進行的一次封裝。
NPM包流程：

• index.js入口檔案：匯出一個axios.js檔案
• axios.js檔案：匯出了axois module.exports=axios；axios又是什麼？axios是向createInstance傳了一個defaultConfig引數的返回值。

//Axios/lib/axios.js
function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  ...
  return instance;
}

var axios = createInstance(defaults);

• defaults.js檔案：引數是什麼？引數是一些header資訊等一些預設值。
  知識點：axios可以同時支援客戶端和服務端的請求。原理就是通過瀏覽器XHR和proess來區分請求。

/ 通過nodejs中的process和瀏覽器的XMLHttpRequest來區別當前在前端還是nodejs中
function getDefaultAdapter() {
  var adapter;
  if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
    adapter = require('./adapters/http');//Nodejs端的Axios的實現：基於http或者https模組來發起請求的
  } else if (typeof XMLHttpRequest !== 'undefined') {
    adapter = require('./adapters/xhr');//瀏覽器中axios的實現：對ajax庫的封裝，只不過暴露一個Promise出去
  }
  return adapter;
}

var defaults = {
  adapter: getDefaultAdapter(),
  ... 
  timeout: 0,

  xsrfCookieName: 'XSRF-TOKEN',
  xsrfHeaderName: 'X-XSRF-TOKEN',

  maxContentLength: -1,
 
  validateStatus: function validateStatus(status) {
    return status >= 200 && status < 300;
  }
};

defaults.headers = {
  common: {
    'Accept': 'application/json, text/plain, */*'
  }
};

• /lib/core/Axios.js：看看createInstance內部是什麼？就是將傳入的引數，掛載到自己的this上，新增了一個攔截器物件interceptors，這個物件裡有request和response屬性。這個屬性中的InterceptorManager這個建構函式又是幹嘛的？
• /lib/IntercetporManager.js：攔截器中的建構函式有三個方法。use、eject、forEach。

/ 進入core/InterceptorManager.js
InterceptorManager.prototype.use = function() {...}//使用攔截器
InterceptorManager.prototype.eject =  function() {...}//刪除use過的內容
InterceptorManager.prototype.forEach = function forEach(fn) {...}//迴圈執行fn

目前為止是createInstance函式執行返回的值就是axios的一些過程，給大家一個詳細的連線，博主寫的很好，我只是做些筆記。axios詳細解讀