Fetch:下一代 Ajax 技术

Ajax,二〇〇七年诞生的技能,于今已不止了 10
年。它是一种在客户端创造三个异步请求的技艺,本质上它不算立异,是一组技术的整合。它的基本指标是
XMLHttpRequest。

 

粗略回想下历史

  1. 一九九九年,IE 中率先添加了 iframe 用来贯彻异步请求获取服务器内容
  2. 1997年,微软 Outlook 在客户端 script 中落到实处了 XMLHttp 对象
  3. 1998年,微软在 IE5 中添加了 XMLHTTP ActiveX
    对象用来异步获取服务器内容,该对象直到 艾德ge
    浏览器才撤消。其它浏览器陆续落到实处了看似的靶子称为 XMLHttpRequest
  4. 二〇〇四年,谷歌 Gmail 中山高校量施用 XMLHttpRequest
  5. 二零零五年,谷歌(Google) Map 中山大学量行使 XMLHttpRequest
  6. 2006年,Jesse James 加雷特 宣布了稿子 “Ajax: A New Approach to Web
    Applications
    “,Ajax
    诞生
  7. 二零零五年,XMLHttpRequest 被 W3C 选取,最终更新时间是 贰零壹伍年5月

动用手续大概如下

var xhr = new XMLHttpRequest();
xhr.open('GET', url);

xhr.onload = function() {
    // To do with xhr.response
};

xhr.onerror = function() {
    // Handling errors
};

xhr.send();

 

上述方可观看,XH汉兰达 使用 onXXX 处理,典型的 “事件格局”。

Fetch 最近还不是 W3C 规范,由
whatag担当产品。与
Ajax不等的是,它的 API
不是事件机制,而选拔了近日风靡的 Promise 情势处理。大家领略
Promise是现已正式公布的
ES6
的情节之一。

fetch('doAct.action').then(function(res) {
    if (res.ok) {
        res.text().then(function(obj) {
            // Get the plain text
        })
    }
}, function(ex) {
    console.log(ex)
})

如上 fetch 函数是全局的,近来流行的Firefox,Chrome,Opera 都已支持,详见

图片 1

图片 2

 

以上是叁个最简便易行的哀求,只要传两个参数 url 过去,默许为 get
请求,获取纯文本,fetch 第①个参数能够举办过多计划,比如 POST 请求

fetch("doAct.action", {
    method: "POST",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: "keyword=荣耀7i&enc=utf-8&pvid=0v3w1kii.bf1ela"
}).then(function(res) {
    if (res.ok) {
        // To do with res
    } else if (res.status == 401) {
        // To do with res
    }
}, function(e) {
    // Handling errors
});

 

假定回去的是 JSON, 如下

fetch('doAct.action').then(function(res) {
    if (res.ok) {
        res.json().then(function(obj) {
            // Get the JSON
        })
    }
}, function(ex) {
    console.log(ex)
})

res 实际上该标准定义的 Response 对象,它有如下方法

  1. arrayBuffer()
  2. blob()
  3. json()
  4. text()
  5. formData()

 

此外,Fetch 跨域请求时私下认可不会带 cookie,需求时得手动内定 credentials:
‘include’

fetch('doAct.action', {credentials: 'include'}).then(function(res) {
    // ...
})

那和 XHOdyssey 的 withCredentials 一样,只是 withCredentials 只要设为 true。

 

Fecth 获取 HTTP 头消息卓殊不难

// 取HTTP头信息
fetch('doAct.action').then(function(response) {  
    console.log(response.headers.get('Content-Type'));  
    console.log(response.headers.get('Date'));
});

 

Fetch 也得以链式使用

// 示例4:链式调用
function status(response) {  
  if (response.status >= 200 && response.status < 300) {  
    return Promise.resolve(response)  
  } else {  
    return Promise.reject(new Error(response.statusText))  
  }  
}

function json(response) {  
  return response.json()  
}

fetch('doAct.action')  
  .then(status)  
  .then(json)  
  .then(function(data) {  
    console.log('Request succeeded with JSON response', data);  
  }).catch(function(error) {  
    console.log('Request failed', error);  
  });

 

Fetch 模拟表单提交

fetch('doAct.action', {  
    method: 'post',  
    headers: {  
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
    },  
    body: 'foo=bar&lorem=ipsum'  
  })
  .then(json)  
  .then(function (data) {  
    console.log('Request succeeded with JSON response', data);  
  })  
  .catch(function (error) {  
    console.log('Request failed', error);  
  });

  

相关:

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch
https://fetch.spec.whatwg.org
https://hacks.mozilla.org/2015/03/this-api-is-so-fetching

 

相关文章