目前 web 异步应用都是基于
/
- XMLHttpRequest
(IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性问题。 虽然开发者普遍使用
- ActiveXObject
这样的上层包装,但 Fetch API 意在提供更加方便和一致的原生 API, 同时统一 Web 平台上的资源获取行为,包括外链脚本、样式、图片、AJAX 等。同时Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。
- $.ajax()
- fetch(url)
- .then(function(response) {
- return response.json();
- })
- .then(function(data) {
- console.log(data);
- })
- .catch(function(e) {
- console.log("Oops, error");
- });
- //使用 ES6 的 箭头函数
- fetch(url)
- .then(response => response.json())
- .then(data => console.log(data))
- .catch(e => console.log("Oops, error", e))
- //使用 async/await 来做最终优化
- //使用 await 后,写异步代码就像写同步代码一样爽。await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try…catch 捕获。
- (async function () {
- try {
- let response = await fetch(url);
- let data = response.json();
- console.log(data);
- } catch(e) {
- console.log("Oops, error", e);
- }
- })();
- fetch(url, {
- method: "GET", //默认
- headers:{
- "Accept": "application/json, text/plain, */*"
- }
- })
- .then(response => response.json())
- .then(data => console.log(data))
- .catch(e => console.log("Oops, error", e))
- fetch(url, {
- method: "POST",
- headers: {
- "Accept": "application/json, text/plain, */*",
- "Content-type":"application:/x-www-form-urlencoded; charset=UTF-8"
- },
- body: "name=hzzly&age=22"
- })
- .then(response => response.json())
- .then(data => console.log(data))
- .catch(e => console.log("Oops, error", e))
要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”:
- fetch(url, {
- credentials: "include"
- })
- //将对象拼接成 name=hzzly&age=22 的字符串形式
- function params(obj) {
- let result = ''
- for (let item in obj) {
- result += ` & $ {
- item
- } = $ {
- obj[item]
- }`
- }
- if (result) {
- result = result.slice(1)
- }
- return result
- }
- function post(url, paramsObj) {
- let result = fetch(url, {
- methods: 'POST',
- credentials: "include"headers: {
- "Accept": "application/json, text/plain, */*",
- "Content-type": "application:/x-www-form-urlencoded; charset=UTF-8"
- },
- body: params(paramsObj)
- }) return result
- }
- let obj = {
- name: 'hzzly',
- age: 22
- }
- post(url, obj).then(response = >response.json()).then(data = >console.log(data)).
- catch(e = >console.log("Oops, error", e))
原文 请点击这里React 标配的Fetch是什么?
来源: http://www.cnblogs.com/leungUwah/p/7077065.html