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去空格处理方法
Nov 18 Javascript
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
学习vue.js条件渲染
Dec 03 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
vuex实现数据状态持久化
Nov 11 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
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
[04:32]DOTA2著名解说配音敌法师 现场专访海涛怒切假腿
2013/12/20 DOTA
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Django框架模板介绍
2019/01/15 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python中类与对象之间的关系详解
2020/12/16 Python
会计电算化个人求职信范文
2014/01/24 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
颐和园英文导游词
2015/01/30 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
公司捐书倡议书
2015/04/27 职场文书
工作自我评价范文
2019/03/21 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python