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

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 .axios,fetch,ajax的區別

• 主要區別是axios,fetch請求後都支持Promise對象API,ajax只能用回調函數
• axios支持請求/響應攔截,能夠自動轉換JSON數據
• fetch提供了豐富的api,更加底層化