take jQuery Of ajax、axios and fetch Make a simple comparison , The so-called benevolent see benevolent see benevolent see wise , It's up to you to decide which one to use
1.jQuery ajax

$.ajax({

type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {
},
error: function () {
}
});

Advantages and disadvantages ：

• It's about MVC Programming for , Not in line with the current front end MVVM The wave of
• Native based XHR Development ,XHR The structure is not clear , Already there. fetch alternatives
• JQuery The whole project is too big , Just use ajax But to introduce the whole JQuery Very unreasonable （ You can't enjoy the personalized package CDN service ）

2.axios

axios({

method: 'post',
url: '/user/12345',
data: {

firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {

console.log(response);
})
.catch(function (error) {

console.log(error);
});

Advantages and disadvantages ：

• from node.js establish http request
• Support Promise API
• Client support prevents CSRF
• Provides some interfaces for concurrent requests （ important , It is convenient for many operations ）

3.fetch

try {

let response = await fetch(url);
let data = response.json();
console.log(data);
} catch(e) {

console.log("Oops, error", e);
}

Advantages and disadvantages ：

• In line with the separation of concerns , No input 、 Output and state tracked with events are mixed in one object
• A better and more convenient way to write
• It's much lower , Provided API Enrich （request, response）
• Divorced from XHR, yes ES A new way of implementation in the specification
• 1）fetchtch Error only for network requests , Yes 400,500 All as successful requests , Need to be packaged to handle
• 2）fetch Default will not bring cookie, Configuration items need to be added
• 3）fetch I won't support it abort, Timeout control is not supported , Use setTimeout And Promise.reject The implementation of timeout control does not prevent the request process from continuing to run in the background , It's a waste of quantity
• 4）fetch There is no way to monitor the progress of the request natively , and XHR Sure

Why use axios?
axios It's based on Promise For browsers and nodejs Of HTTP client , It has the following characteristics ：

• Created from the browser XMLHttpRequest
• from node.js issue http request
• Support Promise API
• Intercept requests and responses
• Transform the request and response data
• Cancel the request
• Automatic conversion JSON data
• Client support prevents CSRF/XSRF