浅谈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 相关文章推荐
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
在多个页面使用同一个HTML片段的代码
Mar 04 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
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
C#静态方法与非静态方法实例分析
2014/09/22 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
js版本A*寻路算法
2006/12/22 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
基于python历史天气采集的分析
2019/02/14 Python
python实现微信防撤回神器
2019/04/29 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
编写python代码实现简单抽奖器
2020/10/20 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
房产公证书
2015/01/23 职场文书
个人年终总结怎么写
2015/03/09 职场文书
英语教师求职信范文
2015/03/20 职场文书
大学生十八大感想
2015/08/11 职场文书
销售口号霸气押韵
2015/12/24 职场文书