前端知識總結之Ajax,axios,fetch篇

weixin_34356138發表於2019-06-09
前端iOS

1 .什麼是Ajax

  • Ajax(Asynchronous Javascript And XML)非同步的JavaScript和XML
  • Ajax是瀏覽器提供的一套API
  • 可以通過JavaScript呼叫ajax提供的API和伺服器進行互動
  • Ajax的核心物件是XMLHttpRequest

2 .應用場景

  • 按需獲取資料
    • 百度地圖載入,留言評論等功能
  • 使用者資料的校驗
    • 註冊時,驗證使用者名稱或者郵箱是否註冊
  • 自動更新頁面內容
    • 郵件提醒,訊息提醒
  • 提升使用者體驗,無重新整理的體驗

3. axios

  • 特點:
    • 基於promise的http庫
    • 支援Promise所有 API
    • 安全性更高,客戶端支援防禦XSRF
    • 可以轉換請求資料和響應資料,並對響應回來的內容自動轉換成JSON型別的資料
axios.get('/user',{
    params: {
        id: 123456
    }
})
    .then(function (res){
        console.log(res)
    })
    .catch(function(err){
        console.log(err)
    })
複製程式碼

4. Fetch API

  • Fetch響應結果的資料格式為:
    • res.text() 獲取字串形式資料
    • res.json() 直接獲取json資料
    fetch('http://localhost:3000/data')
    .then(res=>{
        return res.json();
    }).then(res=>{
    console.log(res.username)
})
複製程式碼
  • Fetch API優點:
    • 語法簡潔,更加語義化
    • 基於標準Promise實現,支援async,await

5. Promise

  • ES6中對於非同步程式設計提供的一種解決方案,解決的回撥地獄的問題
  • Promise物件例項的兩個引數,resolve和reject
    • resolve函式: 非同步操作成功時的呼叫,並將非同步操作的結果,作為引數傳遞出去
    • reject函式: 非同步操作失敗時的呼叫,並將非同步操作報出的錯誤,作為引數傳遞出去
  • promise物件例項的方法,then和catch
    • .then方法: 成功時的回撥函式,此方法返回的是一個新的promise例項,可以採用鏈式寫法,.then方法後面可以繼續呼叫.then方法
    • .catch方法: 錯誤時的回撥函式

6 .axios,fetch,ajax的區別

  • 主要區別是axios,fetch請求後都支援Promise物件API,ajax只能用回撥函式

相關文章