关于fetch
前言:
fetch是用来取代传统的XMLHttpRequest的。 它的优点很多,包括链式调用的语法、返回promise等。
什么是fetch?
fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。
WHY fetch?
xhr请求写起来非常的混乱,如下所示:
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json'; xhr.onload = function() {
console.log(xhr.response);
}; xhr.onerror = function() {
console.log("Oops, error");
}; xhr.send();
但是使用fetch之后,如下所示:
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
这种链式调用的风格看上去会非常舒服。
如果我们再使用了箭头函数就会更加简洁了。
fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))
通过使用fetch api,可以将传统的xhr的粗糙的使用方法转化的如此精简,实在是好!
但是呢? 使用Promise,还是可以很明显看到callback的使用,不急,我们还可以使用 async、await :
// Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
// Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch // async function
async function fetchAsync () {
// await response of fetch call
let response = await fetch('https://api.github.com');
// only proceed once promise is resolved
let data = await response.json();
// only proceed once second promise is resolved
return data;
} // trigger async function
// log response or catch error of fetch promise
fetchAsync()
.then(data => console.log(data))
.catch(reason => console.log(reason.message))
这样看上去是不是就好多了呢?
注意: 对于async和await的使用还是很明确的,就是一般我们在一个异步函数之前添加 await 关键词,然后在这个 await 的相关代码外面使用的时 async 函数,这样的结合才是合适的。
利用 async 和 await,我们就可以像写同步代码一样来写异步代码啦!
但是呢,目前async 和 await 的支持性还不是很好,目前还无法在一般的浏览器中使用!
基本使用方法:
fetch必须接受一个资源路径作为参数,并且返回了一个promise,所以我们可以直接使用链式调用的方式。
fetch("/getAllProduct").then(function(res) {
return res.json();
}).then(function (data) {
if (data.code == 200) {
console.log('获取到所有产品' ,data.data);
that.props.addAllProduct(data.data);
} else {
console.log(data.message);
}
})
这样,我们就可以发送一个ajax请求。
/* 对客户端的返回数据封装
* @param [code] (number) code为返回的状态码
* @param [message] (string) message为返回的信息
* @param [data] (any) data是可选的,为返回给前端的数据
*/
// 注意: retrunJson中的res为node处理接口的回调函数中的res,这个是必须的。
function returnJson(res, code, message, data) {
var response = {
code: code,
message: message
};
if (typeof data !== 'undefined') {
response.data = data;
}
res.json(response);
// 返回这个请求之后,必须要 res.end()表示请求的结束,否则后台可能会崩溃。
res.end();
} router.post('/register', function (req, res) {
let userName = req.body.username,
password = req.body.password,
passwordAgain = req.body.passwordAgain,
type = req.body.type;
console.log(userName, password, type);
if (type == 1) {
if (password == passwordAgain) {
let managerId = uuidv1(); console.log(userName, password, passwordAgain); var newUser = new Manager({
name: userName,
password: password,
type: req.body.type,
managerId: managerId
}); Manager.find(userName, function (err, user) {
if (err) {
returnJson(res, 5001, '服务器错误,注册失败');
} else {
if (user !== null) {
returnJson(res, 4003, "此用户已经注册!");
} else {
// 如果符合条件,就注册该用户,将数据保存在数据库。
newUser.save(function (err, user) {
if (err) {
// 服务器端错误,失败返回状态码500
returnJson(res, 500, "用户注册失败!");
} else {
// user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
returnJson(res, 200, "用户注册成功!", user);
}
});
}
}
});
} else {
returnJson(res, 4001, "用户两次输入密码不一致!");
}
} else if( type == 2) { if (password == passwordAgain) {
let userId = uuidv1(); console.log(userName, password, passwordAgain); var newUser = new User({
name: userName,
password: password,
type: req.body.type,
userId: userId
}); User.find(userName, function (err, user) {
if (err) {
returnJson(res, 5001, '服务器错误,注册失败');
} else {
if (user !== null) {
returnJson(res, 4003, "此用户已经注册!");
} else {
// 如果符合条件,就注册该用户,将数据保存在数据库。
newUser.save(function (err, user) {
if (err) {
// 服务器端错误,失败返回状态码500
returnJson(res, 500, "用户注册失败!");
} else {
// user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
returnJson(res, 200, "用户注册成功!", user);
}
});
}
}
});
} else {
returnJson(res, 4001, "用户两次输入密码不一致!");
}
}
});
这样,我们就可以处理一个ajax请求。
注意点:
1、fetch() 返回的是一个Promise对象。
fetch使用的promise对象可以使得我们使用同步的方式写异步函数。
2、 fetch api是可以结合 async 和 await 来使用的。
fetch是基于promise实现的,但是使用promise的写法,我们还是可以看到callback的影子,如果结合 async和await来使用,还是非常不错的。
3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。
4、 fetch api 可以跨域。
参考: https://fetch.spec.whatwg.org/#http-cors-protocol
跨域请求必须包括 Origin 作为header.
以上。
我们在发送fetch请求的时候就会使用到CORS协议,尽管这些对于开发者来说是透明的,但是浏览器还是会发送 origin 字段。
5、fetch提供了对request和response对象的通用定义。
Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。所以在一个Fetch请求中,完全可以只使用Request 和 Response两个对象,通过Request 设置参数,通过Response 对返回值进行处理。
所以,我们可以将一个fetch定义如下:
var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');
var option = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('https://api.github.com/users/mzabriskie',option);
fetch(myRequest).then(function(response) {
...
});
本文转自:https://www.cnblogs.com/zhuzhenwei918/p/7249691.html
关于fetch的更多相关文章
- Git 少用 Pull 多用 Fetch 和 Merge
本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...
- git提示:Fatal:could not fetch refs from ....
在git服务器上新建项目提示: Fatal:could not fetch refs from git..... 百度搜索毫无头绪,最后FQgoogle,找到这篇文章http://www.voidcn ...
- sublime 插件推荐: Nettuts+ Fetch
Nettuts+ Fetch github地址:Nettuts-Fetch 在sublime中直接用 ctrl+shift+P -> pci -> Nettuts-Fetch 即可下载 这 ...
- git pull和git fetch的区别
Git中从远程的分支获取最新的版本到本地有这样2个命令:1. git fetch:相当于是从远程获取最新版本到本地,不会自动merge Git fetch origin master git log ...
- Hibernate之加载策略(延迟加载与即时加载)和抓取策略(fetch)
假设现在有Book和Category两张表,表的关系为双向的一对多,表结构如下: 假设现在我想查询id为2的那本书的书名,使用session.get(...)方法: Session session=H ...
- SQL Server 2012提供的OFFSET/FETCH NEXT与Row_Number()对比测试(转)
原文地址:http://www.cnblogs.com/downmoon/archive/2012/04/19/2456451.html 在<SQL Server 2012服务端使用OFFSET ...
- Attempt to fetch logical page (...) in database 2 failed. It belongs to allocation unit xxxx not to xxx
今天一个同事说在一个生产库执行某个存储过程,遇到了错误: Fatal error 605 occurred at jul 29 2014 我试着执行该存储过程,结果出现下面错误,每次执行该存储过程,得 ...
- Fetch:下一代 Ajax 技术
Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...
- 在 JS 中使用 fetch 更加高效地进行网络请求
在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用. 我的源博客地址:http://blog.parryqiu.com/2016/03/ ...
- 解决:error: Cannot fetch repo (TypeError: expected string or buffer)
同步源码,问题重现: Fetching project platform/external/libopus Fetching project repo error: Cannot fetch repo ...
随机推荐
- HDU 4316 Contest 2
三个摄像头,在XOY上与立体的点求出在平面上的交点,然后求出凸包.三个凸包相交的面积即是所求,即是可以用半平面交的方法求解了. 模板题了.代码拿别人的. #include<cmath> # ...
- CURL库的宏定义列表
列表CURL库一共同拥有17个函数 curl_close:关闭CURL会话 curl_copy_handle:复制一个CURL会话句柄,同一时候3复制其全部參数 curl_errno:返回最后一个错误 ...
- C++ Primer Plus的若干收获--(九)
这篇博文我接着上一篇来写,相同讲一些关于类的一些基础知识. 本篇将会继续使用上篇的股票类STock,这里给出接口 ifndef STOCKOO_H_ #define STOCKOO_H_ #inclu ...
- HDU 2841 Visible Trees(容斥定理)
Visible Trees Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- nodejs即时聊天
一直想做一个即时聊天的应用,前几天看到了socket.io,感觉还不错.自己略加改动,感觉挺不错的.官网上给的样例非常easy,以下改进了一点,实现了历史消息的推送. demo地址:chat.code ...
- ORA 12505 Listener does not currently know of SID given in connection descriptor
oracle数据库正常启动后.在本地能够正常訪问,可是远程使用sqldevelop却不能訪问.提示ORA 12505 Listener does not currently know of SID g ...
- PHP中用下标符号[]去读取字符串的逻辑
PHP中 [(下标)] 符号不仅能够应用于数组和对象,还能够应用于字符串,假设不注意非常easy出错. 比方获取一个网络接口,正常情况下会返回一个数组结构的json,经过解析之后结果为: array( ...
- JAXB xml与javaBean的转换
转自:https://blog.csdn.net/lydong_/article/details/79812626 `1. 1.不认识到犯错,然后得到永久的教训. 也不是所谓的教训吧,真正的教训来自于 ...
- BZOJ 1101 莫比乌斯函数+分块
思路: 题目中的gcd(x,y)=d (x<=a,y<=b)可以转化成 求:gcd(x,y)=1 (1<=x<=a/d 1<=y<=b/d) 设 G(x,y)表示x ...
- 【原创】MemCached中的参数解释
优化MemCached的主要目的为增加命中率和提高内存使用率,在优化的时候可以根据以下参数综合考虑分析: 首先是进程项: pid Memcached进程ID uptime Memcached运行时间, ...