浅谈Fetch 数据交互方式


Posted in Javascript onDecember 20, 2018

获取资源很简单,发起一个请求出去,一个响应进来,然后该怎么操作就怎么操作。

fetch 的 api 使用的是 promise 规范,不会 promise(用于延迟(deferred) 计算和异步(asynchronous ) 计算。 一个 Promise 对象代表着一个还未完成,但预期将来会完成的操作。主要使用它处理回调黑洞。) 的请花几分钟学习一下。

使用 fetch 去获取数据的方式:

fetch("服务器地址")

  .then(function(response) {

    //将获取到的数据使用 json 转换对象

    return response.json();

  })

  .then(function(data) {

    //获取转换后的格式

    console.log(data);

  })

  //如果有异常会在 catch 捕获

  .catch(function(e) {

    console.log("error");

  });

有没有发现使用 fetch 后代码变优美了,不关心数据怎么请求的,把更多的精力放在处理数据上。

不用写回调函数了,也不用监听 xhr readystatechange 事件了,当数据请求回来后会传递给 then, 有异常就会直接触发 catch 事件。

fetch 默认发起的是 get 请求,如果需要 post 请求需要设置 Request

Request

Request 客户端向服务器发出请求的一个对象,包括用户提交的信息以及客户端的一些信息

使用 Request 构造一个 fetch 请求的对象的详细信息

//实例化 request 对象
var myRequest = new Request(url, Option);

fetch(myRequest)
  .then(function(response) {
    console.log(response);
  })
  //如果有异常会在 catch 捕获
  .catch(function(e) {
    console.log("error");
  });

Request 详细参数配置:

method

设置请求方式

method = GET / POST / PUT / DELETE / HEAD

headers

设置请求头信息,使用 Headers 对象

let headers = new Headers({

  'Content-Type': 'text/plain'

});

mode

请求的模式,主要用于跨域设置

mode = cors / no-cors / same-origin

cors : 跨域

no-cors : 不跨域

same-origin : 同源

credentials

需要向服务器发送 cookie 时设置

credentials = omit / same-origin

 omit : 省略

same-origin : 发送同源 cookie

cache

cache = default / reload / no-cache

redirect

收到重定向消息时如何处理

redirect = follow / error / manual

follow : 跟随重定向的地址 ,继续请求

error : 不请求

比如:

var request = new Request("url", {

    headers: new Headers({

      "Content-Type": "text/plain"

    }),

    method : "POST",

    mode: "cors",

    redirect : "follow"

  });

fetch(request)

  .then((response) => {

    console.log(response);

  })

  .catch((error)=>{

    console.log(error);

  });

fetch 数据处理

当 fetch 把请求结果拿到后,我们需要使用它提供的几个方法来做处理

json 

fetch 提供了一个 json 方法将数据转换为 json 格式

fetch(url)

  .then((response) => {

    //返回 object 类型

    return response.json();

  })

  .then((result) => {

    console.log(result);

  });

text

fetch 提供了一个 text 方法用于获取数据,返回的是 string 格式数据

fetch(url)

  .then((response) => {

    //返回 string 类型

    return response.text();

  })

  .then((result) => {

    console.log(result);

  });

blob

如果我们获取的是一个图像,需要先设置头信息,然后 fetch 会正常处理本次请求,最终使用 blob 方法获取本次请求的结果, 可以把结果赋值给 img src 就能正常的显示一张图片

var request = new Request("xx.img", {

    headers: new Headers({

      "Content-Type": "image/jpeg"

    }),

    method : "get",

    cache: 'default'

  });

fetch(request)

  .then((response) => {

    return response.blob();

  })

  .then((stories)=>{

    var objectURL = URL.createObjectURL(stories);

    let img = document.createElement("img");

    img.src = objectURL;

    document.querySelector("body").appendChild(img);

  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS数学函数Exp使用说明
Aug 09 Javascript
JSON字符串转JSON对象
Jul 31 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
vue组件横向树实现代码
Aug 02 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
cocos2dx+lua实现橡皮擦功能
Dec 20 #Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 #Javascript
fetch 如何实现请求数据
Dec 20 #Javascript
JS闭包经典实例详解
Dec 20 #Javascript
JS闭包原理与应用经典示例
Dec 20 #Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 #Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 #Javascript
You might like
PHP中cookies使用指南
2007/03/16 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
header导出Excel应用示例
2014/01/24 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python自定义函数的创建、调用和函数的参数详解
2014/03/11 Python
python中dir函数用法分析
2015/04/17 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
人生苦短我用python python如何快速入门?
2018/03/12 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python实现飞机大战项目
2020/03/11 Python
python中PyQuery库用法分享
2021/01/15 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
2015年护士节活动总结
2015/02/10 职场文书
活动总结书怎么写
2015/05/11 职场文书
圣诞晚会主持词
2015/07/01 职场文书
技能培训通讯稿
2015/07/18 职场文书
电工实训心得体会
2016/01/14 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技