前端知识总结之Ajax,axios,fetch的区别

1 .什么是Ajax

Ajax(Asynchronous Javascript And XML)异步的JavaScript和XML
Ajax是浏览器提供的一套API
可以通过JavaScript调用ajax提供的API和服务器进行交互
Ajax的核心对象是XMLHttpRequest

2 .应用场景

按需获取数据
百度地图加载,留言评论等功能
用户数据的校验
注册时,验证用户名或者邮箱是否注册
自动更新页面内容
邮件提醒,消息提醒
提升用户体验,无刷新的体验

3. axios

特点:

基于promise的http库
支持Promise所有 API
安全性更高,客户端支持防御XSRF
可以转换请求数据和响应数据,并对响应回来的内容自动转换成JSON类型的数据
可以拦截请求和响应

axios.get(’/user’,{
params: {
id: 123456
}
})
.then(function (res){
console.log(res)
})
.catch(function(err){
console.log(err)
})

4. Fetch API

Fetch响应结果的数据格式为:

res.text() 获取字符串形式数据
res.json() 直接获取json数据

fetch(‘http://localhost:3000/data’)
.then(res=>{
return res.json();
}).then(res=>{
console.log(res.username)
})

Fetch API优点:

语法简洁,更加语义化
基于标准Promise实现,支持async,await

5 .axios,fetch,ajax的区别

主要区别是axios,fetch请求后都支持Promise对象API,ajax只能用回调函数
axios支持请求/响应拦截,可以自动转换JSON数据
fetch提供了丰富的api,更加底层化