ajax，fetch，axios的區別及運用

Berlin_Rome發表於2019-06-11
iOS

AJAX

  • 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
  • 通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
  • 傳統的網頁（不使用 AJAX）如果需要更新內容，必需過載整個網頁面。
1. ajax的封裝(建立myajax.js 資料夾)
/**
 * {
 *    method:get,
 *    url: '/login.do',
 *    content: 'username=admin&password=123'
 *    success: functon(e){
 *          
 *    }
 * }
 * 
 * 
 * 
 * @param {*} json 
 */
function myajax(json) {
    // 1. 獲取 XmlHttpRequest
    var xhr = getXHR();

    // 2. 開啟連線傳送請求
    xhr.open(json.method, json.url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 請求頭部
    xhr.send(json.content);

    // 3. 處理響應
    xhr.onreadystatechange = function (e) {
        // 根據就緒碼判斷響應是否完成
        if (e.target.readyState === 4) {
            // 根據狀態碼判斷成功失敗
            if (e.target.status === 200) {
                /* console.log(e.target.responseText);
                alert('響應內容是 :' + e.target.responseText); */
                json.success(e.target.responseText);
            }
        }
    }
}


function getXHR() {
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    } else {
        // 相容IE瀏覽器低版本
        new window.AtiveXObject("Microsoft.XMLHTTP");
    }
}

export default myajax;  //暴露出去
2.呼叫myajax
myajax({
        method: "post",   //請求方式post get
        url: "http://127.0.0.1:8089/api/login",  //請求地址
        content: `username=${username}&password=${password}`,  //請求正文
        success: function(e) {  //成功的函式回撥 
          const data = JSON.parse(e);
          if (data.resultcode === -1) {  //介面文件中給的引數，判斷是否等於-1
            //登入失敗
            that.message = data.resultinfo;
          } else {
            //登入成功
            that.$router.replace({ path: "/main" });
          }
        }
      });

Fetch

  • fetch號稱是AJAX的替代品，是在ES6出現的，使用了ES6中的promise物件。Fetch是基於promise設計的。Fetch的程式碼結構比起ajax簡單多了，引數有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest物件。
  • -優勢
  1. 語法簡潔，更加語義化
  2. 基於標準 Promise 實現，支援 async/await
  3. 同構方便，使用 isomorphic-fetch
  4. 更加底層，提供的API豐富（request, response）
  5. 脫離了XHR
fetch使用程式碼
---get請求---

// 通過fetch獲取百度的錯誤提示頁面
fetch('https://www.baidu.com/search/error.html', {
    method: 'GET'
  })
  .then((res)=>{
    return res.text()  // res.json();
  })
  .then((res)=>{
    console.log(res)
  })

---post請求---
// 通過fetch獲取百度的錯誤提示頁面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 這裡是請求物件
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

Axios

-axios主要是jQuery的ajax與fetch的融合，十分強大

  • 特點
  1. 支援瀏覽器和node.js
  2. 支援promise(重點)
  3. 能攔截請求和響應
  4. 能轉換請求和響應資料
  5. 能取消請求
  6. 自動轉換JSON資料
  7. 瀏覽器端支援防止CSRF(跨站請求偽造)
1. 安裝
npm install axios   //然後在需要的地方呼叫
2. 安裝
axios({
  method: 'post',  //請求方式
  url: '/user/12345',   //請求地址
  data: {   //請求資料
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res=>{
	console.log(`成功的回撥${res}`)
}).catch(err=>{
	console.log(`錯誤的回撥${err}`)
});

相關文章