浅谈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代码)
Apr 11 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
js实现倒计时关键代码
May 05 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
js实现一个简易计算器
Mar 30 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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设计模式中的工厂模式
2008/06/12 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
浅谈django orm 优化
2018/08/18 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
会计与审计毕业生自荐信范文
2013/12/30 职场文书
初中数学教学反思
2014/01/16 职场文书
好员工观后感
2015/06/17 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
学校就业保障协议书
2019/06/24 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL