reference resources:
https://juejin.cn/post/6844903590058786824
https://space.bilibili.com/327247876

1. What are Ajax, fetch and axios, their advantages and disadvantages?

1)ajax

ajax refers to asynchronous javascript and XML. It is a general term of technology. Its characteristic is to refresh the page locally without reloading the whole page. ajax uses the XMLHttpRequest constructor provided by the js operation browser to represent the web page request for network communication.
There are several functions and parameters that need attention inside ajax:

Open (request method, url, asynchronous or not): define the request
Send (request body): send the request
readyState: equivalent to the status code of the client
The change of readyState property value will trigger the * * onreadystatechange() * * callback function, so use onreadystatechange to monitor the change of readyState property.
0: open method not called
1: The open method was called, but the send method was not called
2: A request has been sent and no response has been received
3: Partial response received
4: All responses have been received

function ajax(url){
    //1. Because js itself has no network communication ability, it is necessary to create an XMLHttpRequest provided by the browser
    let xhr = new XMLHttpRequest();
    //2. Then define the request and fill in the request type, URL and asynchrony with the open() method
    xhr.open('get',url,true);
    //3. Use onreadystatechange() to monitor the change of readyState attribute value
    xhr.onreadystatechange = () =>{
        if(xhr.readyState===4){//If readyState equals 4, all responses are received
            if(xhr.status===200){//Receiving all responses does not mean that the file has been successfully received. The file may not exist, so judge the status code
                console.info("Response results",xhr.response);
            }
        }
    }
    //4. Send the request with the send() method
    xhr.send(null);
}

2)fetch

fetch is an API for sending network requests based on promise proposed by es6. Because promise is used, chain calls will not produce callbacks.

The GET method is the default method for sending requests to fetch:

function fetchmethod(url){
    fetch(url)
        .then(response=>{//Received a response from the server
            if(response.ok){
                //If the response status is ok, the response is converted into a json object that js can operate on
                response.json();
            }
            throw new Error("Error prompt");//If it fails, an exception is thrown
    	})
    	.then(data => console.log(data));//Get the information you want
}

If a fetch sends a POST request, it needs to set the second parameter (a configuration object):

function fetchmethod(url){
    fetch(url,{
        method:'POST',
        //Before submitting the request body, it should be converted into a format recognized by the server, and the js object should be converted into json
        body: JSON.stringify({key:value}),
        headers:{
            //Define the type of http request header so that the server can better identify the content
            'Content-Type':'application/json'
        }
    })
        .then(response=>{
            if(response.ok){
                response.json();
            }
            throw new Error("Error prompt");
    	})
    	.then(data => console.log(data));
}

3)axios

axios is a package library widely used with the rise of vue. It supports promise API and encapsulates XHR.

axios({
    method:'GET',
    url:'xxx'
})
.then(res=>console.log(res))
.catch(error=>console.log(error));

4) Summary

ajax:

1. For mvc programming, with the rise of front-end mvvm frameworks such as react and vue, jquery has long lost its courage
2. In many cases, we only need to use ajax, but we need to introduce the whole jquery, which is very unreasonable
3. Callback hell

fetch:
The fetch also has some problems

1. Browser support is poor.
2. When an HTTP status code representing an error is received, Promise returned from fetch() will not be marked as reject, even if the status code of the HTTP response is 404 or 500. Instead, it will mark the Promise status as resolve (but set the ok attribute of the return value of resolve to false), and it will only be marked as reject when the network fails or the request is blocked.

axios:

1. axios is small in size, and it is also a library of promise based package xhr
2. Automatically convert to json data type
3. Solve the problem of callback hell
4. Good browser compatibility

2.