- 内容简介
- 译者序
- 前言
- 第 1 章 安装配置新项目
- 第 2 章 Flexbox 布局介绍
- 第 3 章 用 React Native 开发一个应用
- 第 4 章 在 React Native 中使用导航
- 第 5 章 动画和滑动菜单
- 第 6 章 用 React Native 绘制 Canvas
- 第 7 章 使用 React Native 播放音频
- 第 8 章 你的第一个自定义视图
- 第 9 章 Flux 介绍
- 第 10 章 处理复杂的应用程序状态
- 第 11 章 使用 Node 来实现服务端 API
- 第 12 章 在 React Native 中使用文件上传
- 第 13 章 理解 JavaScript Promise
- 第 14 章 fetch 简介
- 第 15 章 在 iOS 中使用 SQLite
- 第 16 章 集成 Google Admob
- 第 17 章 React Native 组件国际化
- 附录 A React.js 快速介绍
- 附录 B Objective-C Primer
- 附录 C webpack 入门
文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
将 Promise 用于 XMLHttpRequest
只要能向后兼容,Promise 将来会被大范围 API 支持。XMLHtppRequest 是重点考虑的对象之一,现在我们先来写个简单的 GET 请求:
function get(url) { // 返回一个新的 Promise return new Promise(function(resolve, reject) { // 正常的 XHR 操作 var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { // 当发生如 404 等状态的时候调用此函数 // 所以需要检查状态码 if (req.status == 200) { // 将成功相应后的文本信息返回,执行成功回调 resolve(req.response); } else { // 否则请求失败,并返回相应的状态码给失败回调 // 这里最好提供一个有意义的 Error 对象 reject(Error(req.statusText)); } }; // 处理网络错误 req.onerror = function() { reject(Error("Network Error")); };
// 发送请求 req.send(); }); }
现在我们用上面的方法来试试:
get('story.json').then(function(response) { console.log("Success! ", response); }, function(error) { console.error("Failed! ", error); });
可以在开发者工具中的控制台下看到相应的请求结果。当我们下次再发送 HTTP 请求时,不用再敲 XMLHttpRequest 相关代码了,直接调用上面的函数即可,这真是太棒了!减少 XMLHttpRequest 这个复杂命名的烦琐调用,一定会让你的编码生涯更加快乐。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论