JavaScript fetch接口案例解析


Posted in Javascript onAugust 30, 2018

在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。

现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求。

如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便,毕竟工作中用到的也就是一些很基础的点而已。

fetch,说白了,就是XMLHttpRequest的一种替代方案。如果有人问你,除了Ajax获取后台数据之外,还有没有其他的替代方案?

这是你就可以回答,除了XMLHttpRequest对象来获取后台的数据之外,还可以使用一种更优的解决方案fetch。

fetch的案例

下面我们来写第一个fetch获取后端数据的例子:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
 .then((res)=>{
  return res.text() // res.text()是一个Promise对象
 })
 .then((res)=>{
  console.log(res) // res是最终的结果
 })

GET请求

GET请求初步

完成了helloworld,这个时候就要来认识一下GET请求如何处理了。

上面的helloworld中这是使用了第一个参数,其实fetch还可以提供第二个参数,就是用来传递一些初始化的信息。

这里如果要特别指明是GET请求,就要写成下面的形式:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
  method: 'GET'
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

GET请求的参数传递

GET请求中如果需要传递参数怎么办?这个时候,只能把参数写在URL上来进行传递了。

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html?a=1&b=2', { // 在URL中写上传递的参数
  method: 'GET'
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

POST请求

与GET请求类似,POST请求的指定也是在fetch的第二个参数中:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
  method: 'POST' // 指定是POST请求
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

POST请求参数的传递

众所周知,POST请求的参数,一定不能放在URL中,这样做的目的是防止信息泄露。

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
  method: 'POST',
  body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

设置请求的头信息

在POST提交的过程中,一般是表单提交,可是,经过查询,发现默认的提交方式是:Content-Type:text/plain;charset=UTF-8,这个显然是不合理的。下面咱们学习一下,指定头信息:

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
  method: 'POST',
  headers: new Headers({
   'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
  }),
  body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

这个时候,在谷歌浏览器的Network中查询,会发现,请求方式已经变成了content-type:application/x-www-form-urlencoded。

通过接口得到JSON数据

上面所有的例子中都是返回一个文本,那么除了文本,有没有其他的数据类型呢?肯定是有的,具体查询地址:Body的类型

由于最常用的是JSON数据,那么下面就简单演示一下获取JSON数据的方式:

fetch('https://www.baidu.com/rec?platform=wise&ms=1&rset=rcmd&word=123&qid=11327900426705455986&rq=123&from=844b&baiduid=A1D0B88941B30028C375C79CE5AC2E5E%3AFG%3D1&tn=&clientWidth=375&t=1506826017369&r=8255', { // 在URL中写上传递的参数
  method: 'GET',
  headers: new Headers({
   'Accept': 'application/json' // 通过头指定,获取的数据类型是JSON
  })
 })
 .then((res)=>{
  return res.json() // 返回一个Promise,可以解析成JSON
 })
 .then((res)=>{
  console.log(res) // 获取JSON数据
 })

强制带Cookie

默认情况下, fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于维护一个用户会话,则导致未经认证的请求(要发送 cookies,必须发送凭据头).

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
  method: 'GET',
  credentials: 'include' // 强制加入凭据头
 })
 .then((res)=>{
  return res.text()
 })
 .then((res)=>{
  console.log(res)
 })

总结

以上所述是小编给大家介绍的JavaScript fetch接口案例解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 #Javascript
原生JS实现的简单小钟表功能示例
Aug 30 #Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 #Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 #Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 #Javascript
简述vue状态管理模式之vuex
Aug 29 #Javascript
jQuery实现的简单手风琴效果示例
Aug 29 #jQuery
You might like
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python 带时区的日期格式化操作
2020/10/23 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
运动会解说词200字
2014/02/06 职场文书
同学聚会主持词
2014/03/18 职场文书
婚假请假条怎么写
2014/04/10 职场文书
《赶海》教学反思
2014/04/20 职场文书
股票投资建议书
2014/05/19 职场文书
学生个人总结范文
2015/02/15 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
python 爬取天气网卫星图片
2021/06/07 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript