前面的话

  Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合乎逻辑的方式来跨网络异步获取资源。本文将详细介绍fetch的相关内容

概述

  跨网络异步获取资源的功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如 CORS和HTTP的扩展

  fetch 规范与 jQuery.ajax() 主要有两种方式的不同

  1、当接收到一个代表错误的 HTTP 状态码时,从 fetch()返回的 Promise 不会被标记为 reject, 即使该 HTTP 响应的状态码是 404 或 500。相反,它会将 Promise 状态标记为 resolve (但是会将 resolve 的返回值的 ok 属性设置为 false ), 仅当网络故障时或请求被阻止时,才会标记为 reject

  2、默认情况下, fetch 不会从服务端发送或接收任何 cookies,如果站点依赖于用户 session,则会导致未经认证的请求(要发送 cookies,必须设置 credentials 选项)

fetch请求

  一个基本的 fetch请求设置起来很简单。这里我们通过网络获取一个图像并将其插入到一个 <img> 元素中。最简单的用法是只提供一个参数用来指明想fetch到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)

let myImage = document.querySelector('img');

fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
let objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});

自定义参数

  fetch() 接受第二个可选参数,一个可以控制不同配置的 init 对象:

var myHeaders = new Headers();

var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' }; fetch('flowers.jpg',myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});

post

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
method: 'POST',
body: JSON.stringify({a:}),
  headers: { ...new Headers(headers), 'Content-Type': 'application/json' }
})
.then((res)=>{
return res.text()
})
.then((res)=>{
console.log(res)
})

JSON数据

// 通过fetch获取百度的错误提示页面
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数据
})

检测成功

  如果遇到网络故障,fetch() promise 将会 reject,带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功,需要包含 promise resolved 的情况,此时再判断 Response.ok 是不是为 true

fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});

Headers

  使用 Headers 的接口,可以通过 Headers() 构造函数来创建一个自己的 headers 对象。一个 headers 对象是一个简单的多名值对:

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

  也可以传一个多维数组或者对象字面量:

myHeaders = new Headers({
"Content-Type": "text/plain",
"Content-Length": content.length.toString(),
"X-Custom-Header": "ProcessThisImmediately",
});

  它的内容可以被获取:

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false
myHeaders.set("Content-Type", "text/html");
myHeaders.append("X-Custom-Header", "AnotherValue"); console.log(myHeaders.get("Content-Length")); //
console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"] myHeaders.delete("X-Custom-Header");
console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

封装

  下面是笔者在react中对fetch的精简版封装

import { showLoading, hideLoading, showAlertText, hideAlertText } from '@/components/Alert/module'
import { logout } from '@/components/Auth/module' const async = ({ dispatch, url, method, data, headers, success, fail, doHideAlert }) => {
// 显示loading
dispatch(showLoading())
let fetchObj = {}
if (method) {
fetchObj = {
method,
body: JSON.stringify(data),
headers: new Headers({ ...headers, 'Content-Type': 'application/json' })
}
}
fetch(url, fetchObj).then(res => {
// 关闭loading
dispatch(hideLoading())
return res.json()
}).then(json => {
// 成功
if (json.code === ) {
!doHideAlert && dispatch(showAlertText(json.message))
setTimeout(() => {
dispatch(hideAlertText())
}, )
success && success(json.result)
// 自定义错误
} else if (json.code === ) {
dispatch(showAlertText(json.message))
// 系统错误
} else if (json.code === ) {
dispatch(showAlertText(json.message))
fail && fail(json.err)
// 认证失败
} else if (json.code === ) {
dispatch(showAlertText(json.message))
dispatch(logout)
}
}).catch(() => {
dispatch(showAlertText('服务器故障'))
})
} export default async

fetch简明学习的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. redux简明学习

    前面的话 这几天被redux折腾的够呛,看了很多视频,也看了很多资料.很多时候,感觉好像顿悟了,但实际上只是理解了其中的一个小概念而已.真正去做项目的时候,还是会卡壳.可能是学CSS和Javascri ...

  3. react-router简明学习

    前面的话 路由用来分发请求.后端是提供服务的,所以它的路由是在找controller,前端是显示页面的,所以它的路由是在找component.本文将详细介绍react-router-dom的内容 Ro ...

  4. Java8简明学习之Lambda表达式

    函数式接口 就是一个有且仅有一个抽象方法,但是可以有多个非抽象方法的接口,函数式接口可以被隐式转换为lambda表达式. 之前已有的函数式接口: java.lang.Runnable java.uti ...

  5. redux 简明学习

    核心概念 redux专注于状态管理,把所有的状态都存在一个对象中.核心概念包括:store.state.action.reducer [store] store是保存数据的地方,redux提供crea ...

  6. (转)JMS简明学习教程

    转:http://www.cnblogs.com/jjj250/archive/2012/08/08/2628552.html 基础篇 JMS是应用系统或组件之间相互通信的应用程序接口,利用它,我们可 ...

  7. HTML标签简明学习一

    !-- ... -- html注释 浏览器不对其中的内容解析,可以用来调试及书写释意 <!-- 动不动就被注释 --> !DOCTYPE 声明文件类型 一般大写,必须位于文档首行,浏览器根 ...

  8. php简明学习笔记

    1.变量 <?php //变量声明(php变量无需单独创建,变量会在第一次赋值时创建) $a = 1; //弱类型(php变量会根据其值自动转换为相应的数据类型) $a = "a&qu ...

  9. React简明学习

    前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...

随机推荐

  1. echarts 移动端地图数据可视化教程

    如上效果图: 以下未代码: <!doctype html> <html lang="en">   <head> <meta charset ...

  2. 新手立体四子棋AI教程(1)——基础扫盲

    一.引言 最近身边好几个朋友开始玩立体四子棋,激起了我的好奇心.那么首先来说什么是[立体四子棋],规则又是如何呢? 上图即为立体四子棋,规则类似于五子棋四子连在一起,但是四子棋更加多样.丰富.不仅可以 ...

  3. nodejs批量导入数据eventproxy(回调函数嵌套解决方案)使用实例

    回调函数嵌套解决方案——eventProxy API地址:https://github.com/JacksonTian/eventproxy 1.安装eventproxy 执行npm install ...

  4. Oracle/Hive/Impala SQL比较1

    5 Function      指数据库内置的function,不讨论UDF.另外,操作符都不比较了,区别不大.   5.1 数学函数 功能 Oracle Hive Impala ABS 绝对值,有 ...

  5. linux系统磁盘空间满了怎么办看完这篇文章之后就知道怎么解决了

    废话不多说直接上图 可以看得到 / 下面已使用100%,已经没有剩余空间可以使用了,上面跑的服务已经访问不了了. 接下来我就看看有没有垃圾文件可以清理的 du -sh * 由于这个机器比较特殊,上面有 ...

  6. mysql错误集锦

    1.使用myqldump备份出错:(--opt快速导出) mysqldump -u root -p --database mysql --opt -h127.0.0.1 > mysql.sqlE ...

  7. 对于一个刚入门的linux运维来说

    干 就完了~ 我觉得 人生的意义在于 不断地学习......

  8. 功能测试很low?不能升级到高级测试工程师?

    功能测试很low?不能升级到高级测试工程师? 功能测试很low?功能测试很简单?功能测试就是黑盒测试?功能测试没有技术含量?功能测试工资低?只会功能测试没有竞争力?功能测试这活初中生都可以干?功能测试 ...

  9. 使用listview空控件展示数据

    1.使用listview控件可以一次性的将有关的全部图像保存在控件中,建立集合图像. 图像列表控件的主要属性 属性                                           ...

  10. C语言程序设计(基础)- 第4周作业

    一.PTA作业 完成PTA第四周作业中8个题目,并将其中4个题目的思路列在博客中. 1.7-1 计算分段函数[1] 2.7-2 A除以B 3.7-6 阶梯电价 4.7-7 出租车计价 随笔具体书写内容 ...