ajax、axios、fetch的异同点

今天就来说说我对这些网络请求方式的一些简单认识。

原生ajax:

它是一种创建交互式网页应用的网页开发技术。通过异步模式，提升用户体验，优化浏览器和服务器直接的传输，减少不必要的数据往返，减少带宽占用。ajax引擎在客户端运行，承担部分服务器承担的工作。
优点：局部更新；原生支持
缺点：可能破坏浏览器后退功能；嵌套回调

//创建ajax对象 (兼容性写法)
	if(window.XMLHttpRequest) {
		var xhr = new XMLHttpRequest(); //现代浏览器
	} else {
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");  //IE5 、IE6
	}

//做请求前的准备工作，明确后台的接口地址和请求方式
	GET的准备工作
	不附加任何数据：
	xhr.open("GET", "url地址", true);
	附加数据：
	xhr.open("GET", "url地址?name=aaa&password=111", true);
	POST的准备工作
	不附加任何数据：
	xhr.open("GET", "url地址", true);
	附加数据：
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.open('POST', 'test.php', true );

//发送请求
	GET发送请求
	xhr.send()
	POST发送请求
	不附加数据时
	xhr.send();
	附加数据时
	xhr.send('name=Lan&age=18');

//接受数据：接受请求，处理数据，返回数据，浏览器接受并处理
	xhr.onreadystatechange = function () {  //事件监听
	  if (xhr.readyState == 4) {  //响应就绪
	  	if(xhr.status == 200) {  //请求成功
			var data = xhr.responseText;
		} else {
			alert("请求失败，请重试！")
		}
	  } 
	};

jqueryajax:

在原生的ajax的基础上进行了封装；支持jsonp

var Btn =  document.getElementById("button");
Btn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=aaa&pwd=111",
        success:function(data){
           console.log(data);
        }
    });
}

fetch:

fetch是用来取代传统的XMLHttpRequest的。 它的优点很多，包括链式调用的语法、返回promise等。
api是可以结合 async 和 await 来使用的。
解决回调地狱
API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill

fetch('url地址', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    res.json()
    .then(data => {
    	console.log(data);  //真正的数据
	})
})
.catch(err => {
	console.log(err)
})

fetch的一些详细参数说明

axios:

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

axios({
    method: 'post',
    url: '/login',
    data: {
        userName: 'aaa',
        password: '111'
    }
})
.then(response => {
    console.log(response);
})
.catch(error => {
    console.log(error);
});

本文地址：https://blog.csdn.net/sunlulu66/article/details/107896147