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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP 无限级分类
2017/05/04 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
原生js实现购物车功能
2020/09/23 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python书单 不将就
2017/07/11 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Python实现对adb命令封装
2020/03/06 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python实现按日期归档文件
2021/01/30 Python
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
会计专业个人求职信范文
2014/01/08 职场文书
先进单位申报材料
2014/12/25 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
工作表现证明
2015/06/15 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书