1. 原生XHR
//原生XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText) // 从服务器获取数据
}
}
xhr.send()
==ajax 和 axios 本质上都是要包装XMLHttpRequest
2. jquery ajax
- ajax是jquery对原生XHR的封装,还支持JSONP,非常方便;
- 但是在vue等前端框架中,很多情况下我们只需要使用ajax,但是却需要引入整个jquery,这非常的不合理,于是便有了fetch的解决方案。
//jquery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function() {},
error: function() {}
})
3. axios
axios也是对原生XHR的封装。它有以下几大特性:
-
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
-
提供了并发请求的接口
-
可以拦截请求和响应
//请求拦截
axios.intercepters.request.use(function(config){
//请求之前的操作,eg加token
return config;
},function(error){
//请求错误
return Promise.reject(error);
})
//响应拦截
axios.intercepters.response.use(function(res){
//请求之前的操作,eg加token
return res;
},function(error){
return Promise.reject(error);
})
- 能转换请求和响应数据
- 能取消请求