1. What is Ajax

  • Asynchronous Javascript And XML
  • Ajax is a set of apis that browsers provide
  • You can interact with the server through JavaScript calls to the AJax-provided API
  • The core object of Ajax is XMLHttpRequest

2. Application scenarios

  • Get data on demand
    • Baidu map loading, message comments and other functions
  • Verify user data
    • When registering, verify that the user name or email address is registered
  • Automatically updates page content
    • Email alert, message alert
  • Improve user experience, no refresh experience

3. axios

  • Features:
    • Promise based HTTP library
    • Support for all Promise apis
    • The client supports XSRF defense
    • Request and response data can be converted, and the content returned by the response can be automatically converted to JSON-type data
    • Requests and responses can be intercepted
axios.get('/user',{
    params: {
        id: 123456
    }
})
    .then(function (res){
        console.log(res)
    })
    .catch(function(err){
        console.log(err)
    })
Copy the code

4. Fetch API

  • The data format of the Fetch response result is:
    • Res.text () gets the data as a string
    • Res.json () gets the JSON data directly
    fetch('http://localhost:3000/data')
    .then(res=>{
        return res.json();
    }).then(res=>{
    console.log(res.username)
})
Copy the code
  • Fetch API benefits:
    • Syntax concise, more semantic
    • Based on standard Promise implementation, support async,await

5. Differences between Axios, FETCH, and Ajax

  • The main difference is that AXIos supports the Promise object API after the fetch request, while Ajax can only use callback functions
  • Axios supports request/response interception, which automatically transforms JSON data
  • Fetch provides a rich API and is more low-level