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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
javascript  删除select中的所有option的实例
Sep 17 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
JavaScript如何判断对象有某属性
Jul 03 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递归实现汉诺塔问题的方法示例
2017/11/25 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python多线程编程(一):threading模块综述
2015/04/05 Python
python中字符串前面加r的作用
2015/06/04 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
2014年个人售房协议书
2014/10/30 职场文书
实习单位证明范例
2014/11/17 职场文书
上诉状格式
2015/05/23 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android