Fetch数据请求

什么是Polyfill?

Polyfill是一个js库,主要抚平不同浏览器之间对js实现的差异。比如,html5storage(session,local), 不同浏览器,不同版本,有些支持,有些不支持。PolyfillPolyfill有很多,在GitHubhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills),帮你把这些差异化抹平,不支持的变得支持了(典型做法是在IE浏览器中增加 window.XMLHttpRequest ,内部实现使用 ActiveXObject。)

提到Polyfill,不得不提shim。 ``polyfillshim的一种。
shim是将不同 api封装成一种,比如 jQuery$.ajax 封装了 XMLHttpRequestIEActiveXObject方式创建xhr对象。它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现。

XMLHttpRequest是一个设计粗糙的API,配置和调用方式非常混乱,而且基于事件的异步模型,写起来不友好,容易掉入回调地狱中。

W3C新标准出来后,给了我们一个新的通道Fetch,Fetch取代了XMLHttpRequest,它是集成在浏览器标准里面的,所以它就是嫡系,它虽然是嫡系,但是它的兼容性不是很好,也没有第三方库:axios好用,所以用它比较少

(局部页面刷新技术没有改变,只是说一前做异步的时候用XMLHttpRequest来实现,现在我们可以用Fetch来实现,Fetch是基于polyfill的)

Fetch是浏览器自带的,无需再次引入其他的插件包了。

javascript 复制代码
//Get请求
fetch("http://localhost:8080/users")
    .then(res => res.json()) //这里和获取到的不是返回值,只是设定返回的数据类型,如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本,那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

//Post请求
fetch("http://localhost:8080/users", { method: 'post', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 18 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值,只是设定返回的数据类型,如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本,那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

//Post请求
fetch("http://localhost:8080/users", { method: 'post', headers: { "content-type": "application/x-www-formurlencoded", body: "name=王五&age=20" } })
    .then(res => res.json()) //这里和获取到的不是返回值,只是设定返回的数据类型,如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本,那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

//Put请求
fetch("http://localhost:8080/users", { method: 'put', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 18 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值,只是设定返回的数据类型,如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本,那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

//Delete请求
fetch("http://localhost:8080/users/5", { method: 'post', headers: { "content-type": "application/json", body: JSON.stringify({ username: "张三", age: 19 }) } })
    .then(res => res.json()) //这里和获取到的不是返回值,只是设定返回的数据类型,如果服务端返回的是Json那么这里就res.json(),如果服务端返回的是文本,那么这里就res.text()
    .then(res => {
        console.log(res); //这里才是返回具体数据
    })

axios:因为axios是第三方库,所以需要引入包

javascript 复制代码
//使用axios第三方库需要引入插件
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios.get("http://localhost:8080/users")
.then(res => console.log(res.data))
.catch(err => console.log(err));

axios.get("http://localhost:8080/users", { params: { name: "张三" } })
.then(res => console.log(res.data))
.catch(err => console.log(err));

// post-json
axios.post("http://localhost:8080/users", { name: "张三", age: 21 })
.then(res => console.log(res.data))
.catch(err => console.log(err));

// post-form
axios.post("http://localhost:8080/users", "name=张三&age=21")
.then(res => console.log(res.data))
.catch(err => console.log(err));


axios.post("http://localhost:8080/users/5", { name: "张三", age: 21 })
.then(res => console.log(res.data))
.catch(err => console.log(err));

axios.delete("http://localhost:8080/users/5")
.then(res => console.log(res.data))
.catch(err => console.log(err));
相关推荐
时光の尘7 分钟前
C语言菜鸟入门·关键字·float以及double的用法
运维·服务器·c语言·开发语言·stm32·单片机·c
以后不吃煲仔饭21 分钟前
Java基础夯实——2.7 线程上下文切换
java·开发语言
进阶的架构师22 分钟前
2024年Java面试题及答案整理(1000+面试题附答案解析)
java·开发语言
前端拾光者26 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
程序猿阿伟27 分钟前
《C++ 实现区块链:区块时间戳的存储与验证机制解析》
开发语言·c++·区块链
Json_1817901448044 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
傻啦嘿哟1 小时前
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
开发语言·python·excel
大数据编程之光1 小时前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
初九之潜龙勿用1 小时前
C#校验画布签名图片是否为空白
开发语言·ui·c#·.net
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网