基于Promise对象的新一代Ajax API--fetch

 1 *****************************************************************
 2 #fetch Request 使用isomorphic-fetch发送fetch请求
 3
 4 import fetch from ‘isomorphic-fetch‘;  //ES6中为window原生方法
 5
 6 fetch(url,{
 7     method: "POST",
 8       headers: {"Content-Type": "text/plain"},
 9       body: "firstName=Nikhil&favColor=blue&password=easytoguess"
10 }).then(function(response) {
11     if (response.status >= 400) {  //判断请求是否成功
12         throw new Error("Bad response from server!");
13     }
14     //response.headers.get(‘Content-Type‘)
15     //response.headers.get(‘Date‘)
16     //response.status
17     //response.statusText
18     //response.type
19     //response.url
20
21     return response.json();  //将Promise对象转成json对象
22     //.text():返回字符串
23     //.json():返回一个JSON对象
24     //.formData():返回一个FormData对象
25     //.blob():返回一个blob对象
26     //.arrayBuffer():返回一个二进制数组
27 }).then(function(json) {
28     console.log(json);  //执行你的代码
29 }).catch(function(ex) {
30     console.log(‘request failed‘, ex);  //异常处理
31 });
32 *****************************************************************
33
34 *****************************************************************
35 #JSONP Request 使用fetch-jsonp发送jsonp请求
36
37 import fetchJsonp from ‘fetch-jsonp‘;
38
39 fetchJsonp(url,{
40     jsonp:‘callback‘,  //可不设置,默认生成为callback
41     jsonpCallback:‘myCallback‘,  //可不设置,默认生成随机名称
42     timeout:3000,  //可不设置,默认5000
43     data:{a:1},  //参数  最后生成url?a=1&callback=myCallback的请求
44 }).then(function(response) {
45     return response.json();  //接受结果为Promise对象,转成json对象
46 }).then(function(json) {
47     console.log(json);  //执行你需要的代码
48 }).catch(function(ex) {
49     console.log(‘parsing failed‘, ex);  //异常处理
50 })
51
52 !!!jsonp返回的数据不能是纯json,而是"函数名(json)"的js代码
53 *****************************************************************
时间: 2024-10-12 16:43:11

基于Promise对象的新一代Ajax API--fetch的相关文章

Promise 对象的含义与基本用法

㈠Promise 的含义 ⑴Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大. ⑵所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ⑶从语法上说,Promise 是一个对象,从它可以获取异步操作的消息. ⑷Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理. ㈡Promise对象的特点 ⑴对象的状态不受外界影响. Promise对象代表一个异步操作,它有三种状态: ①pen

基于Promise规范的fetch API的使用

基于Promise规范的fetch API的使用 fetch的使用 作用:fetch 这个API,是专门用来发起Ajax请求的: fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这个对象的: fetch('请求的url地址').then(response => res.json()).then(data= > console.log(data)) // 注意: 第一个.then 中获取到的不是最终的数据,而是一个中间的数据流对象: // 注意: 第一个 .then 中获取到

简单的基于promise的ajax封装

基于promise的ajax封装 1 //调用方式: 2 /* 3 ajaxPrmomise({ 4 url:, 5 method:, 6 headers:{} 7 }).then(res=>{}) 8 */ 9 10 ;(function(window){ 11 //设置默认的参数配置项 12 let _default = { 13 url:'', 14 baseURL:'', 15 method:'GET', 16 params:null, //get请求基于问号传参方式传递给服务器的内容

axios、ajax、fetch三者的区别

1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新 优缺点: 1)局部更新 2)原生支持,不需要任何插件 3)原生支持,不需要任何插件 4)可能破坏浏览器后退功能 5)嵌套回调,难以处理 2.axios:是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 特点: 1)从浏览器中创建 XMLHttpRequests 2)从 node.js 创建 http 请求 3)支持 Promise

$.ajax,axios,fetch三种ajax请求的区别

Ajax是常用的一门与Web服务器通信的技术,目前发送Ajax请求的主要有4种方式: 原生XHR jquery中的$.ajax() axios fetch 至于原生的XHR目前工作中已经很少去手写它了,前些年我们比较常用的是jquery的ajax请求,但是近些年前端发展很快,jquery包装的ajax已经失去了往日的光辉,取而代之的是新出现的axios和fetch,两者都开始抢占“请求”这个前端重要领域.本文结合自己的使用经历总结一下它们之间的一些区别,并给出一些自己的理解. 1.Jquery

promise 对象其实就是 deferred 对象的特例

一.前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念.Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码. jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规范进行实现,有一些API上的差异. 好,让我们来看看他们的特性吧( 本文示例基于jquery 1.8版本以上 ). 二.示例 以前写动画时,我们通常是这么干的: $('.animateEl

promise 对象其实就是 deferred 对象的特例【转】

http://www.tuicool.com/articles/MVnmamr 原文  http://blog.segmentfault.com/f2e/1190000000523676 一.前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念.Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码. jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规

ECMAScript6的Promise对象

1. 概念 Promise对象用于异步(asynchronouss)计算,一个Promise对象代表着一个还未完成,但预期完成的操作. 2. 出现原因: 1)  如果你需要通过ajax发送多次请求,而每一次请求依赖上一次请求返回的结果作为参数来继续下次的请求,这样的话,就需要这么写代码: 上面的例子,假设请求C需要依赖B返回的数据,那么C需要放在B的success函数里面.同样的,A需要依赖B返回的数据,那么A也需要放在B的success函数里面.假设现在存在很多个请求,请求之前是相互的依赖关系

JavaScript 初识Promise 对象

什么是Promise? 其实, Promise就是一个类,而且这个类已经成为ES6的标准,是 ECMAScript 6 规范的重要特性之一.这个类目前在chrome32.Opera19.Firefox29以上的版本都已经支持了,要想在所有浏览器上都用上的话就看看es6-promise吧. ES6 的 Promises 是采用了 Promises/A+ 提案的一种实现.你现在能够找到的各种第三方实现,如果是完全兼容了 Promises/A+ 的,那么就和 ES6 的 Promises 是一致的(当