简介
@polymer/iron-ajax 是一个 Polymer 元素，用于进行 AJAX 请求。它可以帮助前端开发者轻松地向后端请求数据，实现与后端的交互，为前端页面提供数据支持。
安装
我们可以使用 npm 在项目中安装 @polymer/iron-ajax：
npm install @polymer/iron-ajax
使用
基本用法
@polymer/iron-ajax 是一个自定义元素，我们将其引入到页面中，就可以使用它的属性和方法了。
<iron-ajax auto url="http://example.com/data.json" handle-as="json" on-response="handleResponse" debounce-duration="300" > </iron-ajax>
在上面的代码中，我们创建了一个 iron-ajax 元素，并配置了如下属性：
auto：指示 iron-ajax 元素在创建时自动触发请求。url：请求数据的 URL。handle-as：指示请求的响应数据类型，这里是 JSON。on-response：指定处理请求数据的回调函数。debounce-duration：防抖时间，指示在请求数据之前等待的时间，防止多次发送请求。
当 iron-ajax 元素创建后，它会自动向指定的 URL 发送一条 AJAX 请求，并在获取响应数据后执行 handleResponse 函数处理数据。
发送 POST 请求
我们可以通过配置 iron-ajax 元素的 method 属性来指定请求方法。默认情况下，它使用 GET 方法。如果我们要发送 POST 请求，就将 method 属性设置为 POST，同时在 body 属性中传递请求数据。
<iron-ajax method="POST" url="http://example.com/submit" content-type="application/json" handle-as="json" on-response="handleResponse" > </iron-ajax>
在上面的代码中，我们将 iron-ajax 元素的方法设置为 POST，并在请求体中传递 JSON 数据，在后端接收时，可以通过解析 JSON 获取数据。
发送 FormData 请求
除了使用 JSON 数据，我们还可以使用表单数据来发送请求。要发送 FormData，我们需要创建一个 FormData 实例，并将其作为 iron-ajax 元素的 body 属性值。
-- -------------------- ---- ------- ---------- ------------- ------------------------------- ---------------- ---------------------------- - ------------ -------- ----- -------- - --- ----------- ----------------------- ------ ---------------------- ---- ------------------------- ------------ ----- ---- - ------------------------------------ --------- - --------- ---------展开代码
在上面的代码中，我们创建了一个 FormData 实例，并将其作为 iron-ajax 元素的 body 属性值。其中，avatarFile 是一个 File 实例，这个实例包含用户上传的文件内容。
发送自定义请求头
要发送自定义请求头，我们需要将请求头添加到 iron-ajax 元素的 headers 属性中。
<iron-ajax method="GET" url="http://example.com/data" headers='{"Authorization": "Bearer ' + token + '"}' handle-as="json" on-response="handleResponse" > </iron-ajax>
在上面的代码中，我们将 Authorization 请求头添加到了 iron-ajax 元素中，并在其值中包含了一个令牌值。
总结
@polymer/iron-ajax 让前端开发者能够方便地向后端请求数据，并且支持各种请求方式、数据类型和请求头。我们学习了 @polymer/iron-ajax 的基本用法以及一些高级用法，希望这篇文章能够帮助你更好地使用 @polymer/iron-ajax，为你的前端项目开发提供更多的支持。
示例代码
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------- ------- ------------- -------------------------- ------- ------ ---------- ---- -------------------------------------------------- ------------ ------------------------- -------------------- ---------------- ----------------------- ---------------------------- ------------- -------- -------- --------------------- - ----------------------------------- - --------- ------- -------展开代码
import '@polymer/iron-ajax/iron-ajax.js'
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f75569ca9b7065299ccbca7
