浅谈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 网页跳转的方法
Dec 24 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jquery预加载图片的方法
May 27 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 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
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
生产部经理岗位职责
2013/12/16 职场文书
中文教师求职信
2014/02/22 职场文书
主管会计岗位职责
2014/03/13 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
世界文化遗产导游词
2019/08/07 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server
HttpClient实现表单提交上传文件
2022/08/14 Java/Android