Ajax与Fetch

tianhang 发布于2019-08-19 18:02 / 1035人阅读

摘要：介绍页面中需要向服务器请求数据时，基本上都会使用来实现。的本质是使用对象来请求数据。目前还有一个是采用方式来处理数据的，这个技术叫做。可以在里面指定是还是如果是跨域的话，可以指定为来解决跨域问题。

介绍

页面中需要向服务器请求数据时，基本上都会使用Ajax来实现。Ajax的本质是使用XMLHttpRequest对象来请求数据。XMLHttpRequest的使用如下：

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onload = function() {
  console.log(xhr.response);
};
xhr.onerror = function() {
  console.error("error");
};
xhr.send();

可以看出，XMLHttpRequest对象是通过事件的模式来实现返回数据的处理的。目前还有一个是采用Promise方式来处理数据的，这个技术叫做Fetch。

Fetch的使用

使用Fetch实现请求的最基本代码：

fetch(url).then(function (response) {
  return response.json();  // json返回数据
}).then(function (data) {
  console.log(data);  // 业务逻辑
}).catch(function (e) {
  console.error("error");
})

使用ES6的箭头函数后，可以更加简洁：

fetch(url).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error("error"));

还可以使用ES7的async/await进一步简化代码：

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("error");
}

这样，异步的请求可以按照同步的写法来写了。

Fetch修改head信息

fetch方法中还有第二个参数，第二个参数是用于修改请求的Head信息的。可以在里面指定method是GET还是POST；如果是跨域的话，可以指定mode为cors来解决跨域问题。

var headers = new Headers({
  "Origin": "http://taobao.com"
});
headers.append("Content-Type", "text/plain");

var init = {
  method: "GET",
  headers: headers,
  mode: "cors",
  cache: "default"
};

fetch(url, init).then(response => response.json())
.then(data => console.log(data))
.catch(e => console.error("error"));

私有云云服务器 ajax与后台交互 ajax的同步与异步 ajax与服务器 ajax与json存储格式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79118.html

performance-report页面性能、资源、错误、ajax，fetch请求上报插件完善小巧

摘要：只做页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它可以帮你完成以下功能是比较完整和健全的数据上报插件，它可以帮你完成以下功能当前页面上一页面当前浏览器版本信息页面性能数据信息，例如页面加载时间，白屏时间，解析时间等当前页面 performance-report只做页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它可以帮你完成以下功能： performance-r...

testbird 2019-08-22 16:24 评论0 收藏0
$.ajax vs axios vs fetch

摘要：使用它可以让页面请求少量的数据，而不用刷新整个页面。这是一个比较粗糙的，不符合关注分离的设计原则，配置和使用都不是那么友好。它的一个优势异步操作，但的异步操作是基于事件的异步模型，没有那么友好。 Ajax 是什么？答：Ajax是一种可以在浏览器和服务器之间使用异步数据传输（HTTP请求）的技术。使用它可以让页面请求少量的数据，而不用刷新整个页面。而传统的页面（不使用Ajax）要刷新...

bitkylin 2019-08-23 12:22 评论0 收藏0
快速理解和使用 ES7 await/async

摘要：是最重要特性之一，它是目前为止最佳的异步解决方案了。虽然没有在中录入，但很快就到来，目前已经在阶段。表示暂停，表示执行下一步，如果你不了解也没关系，可以忽略它直接学习。 await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next Stage 4 阶段。直接上例子，比如我们需要...

Kross 2019-08-20 11:35 评论0 收藏0
antd 和 element上传文件详解与FormData详解

摘要：当用户完成选择文件动作时，提交子页面中的。从此我们上传文件就欢欣鼓舞的来找了。因为的核心是对象，异步的实现是通过一个对象，一般简称该对象对。这些回答基于自己理解，如有不妥，希望路过的大神轻喷，指正。背景平时工作中经常会遇到需要上传文件的情况，如果你用ant design 或者element ,它们都提供了上传的组件。我们分别来看一下element 和 antd 手动上传怎么处理：...

Fundebug 2019-08-23 10:29 评论0 收藏0
fetch与ajax（XMLHttpRequest）相比

摘要：前言中新增了一种数据请求的方式，就是，它和有许多相似的功能，但是相比被设计成更具可扩展性和高效性。该模式支持跨域请求，顾名思义它是以的形式跨域当然该模式也可以同域请求不需要后端额外的支持其对应的为。前言 ES6中新增了一种HTTP数据请求的方式，就是fetch，它和XMLHttpRequest有许多相似的功能，但是相比XMLHttpRequest,fetch被设计成更具可扩展性和高效...

diabloneo 2019-08-22 15:39 评论0 收藏0