AmplifyJS request 快速入门一行代码定义并发起 AJAX 请求【免费下载链接】amplifyAmplifyJS项目地址: https://gitcode.com/gh_mirrors/amp/amplifyAmplifyJS 是一款专注于数据管理与应用通信的轻量级 JavaScript 组件库而 AmplifyJS request 模块则把 AJAX 请求的定义、缓存与调用彻底解耦先通过amplify.request.define用一行代码定义好接口再通过amplify.request用一行代码发起请求并拿到数据。这套定义与调用分离的 AJAX 请求方案能让你的前端代码更简洁、缓存更可控、维护更省心。本文面向新手与普通开发者用最短的篇幅带你快速上手 AmplifyJS request。AmplifyJS request 是什么为什么值得用 amplify.request是 AmplifyJS 三大核心组件之一另外两个是amplify.core与amplify.store它为数据请求提供了统一的抽象层。它的核心价值在于把数据从哪来、怎么缓存、怎么解析和谁在用数据彻底分离一行代码定义接口地址、请求类型、数据格式全部在定义处集中管理内置缓存机制内存缓存、定时过期配合amplify.store还能持久化到 localStorage统一回调与状态成功、失败、中止都有规范的回调与状态码天然异步即使资源立即回调结果也始终异步返回不会出现时序问题。 注意使用内置的ajax请求类型时需要 jQuery 1.4 及以上版本。快速上手AmplifyJS request 安装引入的 3 个步骤第一步获取 amplify.request.js 文件AmplifyJS 的发布版文件位于项目的lib目录下其中lib/amplify.request.jsrequest 组件完整版lib/amplify.request.min.js压缩版适合线上使用lib/amplify.js包含 core request store 的全家桶版本。如果你需要获取源码可以直接克隆仓库https://gitcode.com/gh_mirrors/amp/amplify源码位于src/request.js官方文档在docs/amplify.request.md。第二步在页面中引入依赖文件由于ajax类型依赖 jQuery请务必先引入 jQuery再引入 amplify.request.jsscript srcjquery-1.10.2.js/script script srcamplify.request.js/script第三步验证引入是否成功在控制台输入amplify.request如果返回一个函数说明引入成功可以开始定义你的第一个请求了 。第一步实战一行代码定义 AJAX 请求 ⚡使用amplify.request.define定义资源只需一行核心配置amplify.request.define( ajaxExample1, ajax, { url: /myApiUrl, dataType: json, type: GET });其中三个参数分别是ajaxExample1资源标识符resourceId后续调用时使用ajax请求类型目前内置的就是 ajax配置对象支持所有jQuery.ajax()的配置项如url、dataType、type等。这样整个服务器接口的定义就集中在一个地方了以后接口地址变化只需改动这一处。第二步实战一行代码发起请求并处理结果定义好接口后任何组件都能通过amplify.request一行代码发起请求amplify.request( ajaxExample1, function( data ) { // data.foo 就是接口返回的数据 });也支持携带参数并使用对象式写法方便配置成功/失败回调amplify.request({ resourceId: ajaxExample1, data: { id: 1 }, success: function( data ) { /* ... */ }, error: function( data, status ) { /* ... */ } }); 所有通过amplify.request发起的请求都会异步回调哪怕资源立即返回结果你也不会遇到时序问题。进阶技巧RESTful 路由与数据映射 URL 变量替换快速实现 RESTful 风格接口在定义 URL 时用{变量名}包裹参数发起请求时传入对应数据即可自动替换amplify.request.define( userInfo, ajax, { url: /user/{id}, type: GET }); amplify.request( userInfo, { id: 123 }, function( data ) { /* ... */ } );实际请求的 URL 会变成/user/123而被替换的id会自动从请求数据中移除不会作为 GET/POST 参数提交。数据映射把前端字段翻译成接口字段当接口要求的字段名与前端不一致时可以用dataMap完成翻译amplify.request.define( search, ajax, { url: /search.json, dataType: jsonp, dataMap: { term: q } // 前端传 term接口收 q });内置缓存内存缓存与持久化缓存的配置方法 这是 AmplifyJS request 最省心的特性之一只需在定义时加一个cache配置amplify.request.define( cachedApi, ajax, { url: /myApiUrl, cache: true // 本次页面加载内缓存 }); amplify.request.define( cachedApi2, ajax, { url: /myApiUrl, cache: 30000 // 缓存 30 秒毫秒 });如果同时引入了amplify.store.js需在 request 之前引入还能实现跨页面的持久化缓存cache: persist // 持久化到默认存储 cache: localStorage // 指定存储到 localStorage统一响应处理decoder 解码器 ✨真实项目中接口往往包一层统一格式比如{ status: success, data: {...} }。使用 decoder 可以统一解析让业务代码只关心真正的数据amplify.request.decoders.appEnvelope function ( data, status, xhr, success, error ) { if ( data.status success ) { success( data.data ); } else { error( data.message, data.status ); } }; amplify.request.define( decoderExample, ajax, { url: /myApiUrl, decoder: appEnvelope });此外库还内置了符合 JSend 规范的jsend解码器开箱即用。错误处理与请求状态让异常可控 ️amplify.request内置了状态机制成功回调默认状态为success失败回调可能为error或abort。你可以主动中止请求var myRequest amplify.request( ajaxExample1, { /* ... */ } ); myRequest.abort(); // 稍后中止请求触发 status 为 abort 的 error 回调还可以全局订阅事件统一埋点或上报错误amplify.subscribe( request.error, function( settings, data, status ) { // 所有请求出错时都会触发 });总结AmplifyJS request 让 AJAX 更简单 ✅回顾一下AmplifyJS request 的用法可以浓缩为两句口诀一行定义amplify.request.define(资源名, ajax, { url, ... })一行调用amplify.request(资源名, data, callback)。在此基础上缓存、RESTful 路由、数据映射、decoder 统一解析都是可选的增强配置。如果你想深入源码可以参考src/request.js的核心实现发布版文件在lib/amplify.request.js完整 API 文档见docs/amplify.request.md测试用例位于test/request/unit.js。现在就去克隆https://gitcode.com/gh_mirrors/amp/amplify动手试试吧【免费下载链接】amplifyAmplifyJS项目地址: https://gitcode.com/gh_mirrors/amp/amplify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考