基于HTTP请求拦截，快速解决跨域和代理Mock
|
对付 XMLHttpRequest 哀求，在其 open 要领中理会哀求，会见 AMP 按照相应功效判定是否必要继承发送原哀求到靠山处事器，一个 xhr 只有在其 send 要领被挪用时才会真正的提倡 HTTP 哀求，而在 open 要领中无法获取到 send 要领转达的数据，以是拦截产生在 send 要领中。起首单独存储 send 要领中发送哀求时的参数，然后直接返回，确保先不挪用真正的 XMLHttpRequest 的 send 要领，将单独存储的参数天生对 AMP 的哀求，执行上述 AMP 中的判定。 实例 1、界说与原生 XMLHttpRequest API 同名的接口，称为新的 XHR 接口; 2、重定名原生 XMLHttpRequest API 并添加到新的 XHR 接口; 3、在新的 XHR 接口中界说与原生 XMLHttpRequest API 同名的属性和要领; 4、在同名的 open 要领中理会 HTTP 哀求，获得用来在 AMP 查询接口状态的参数(好比域名+哀求要领+路径); 5、拦截将要发送的原哀求，在同名的 send 要领中暂存原哀求要发送的数据，停息原哀求的发送; 6、用 4 中的参数哀求 AMP，查询接口状态，假如接口不存在或是已完成状态，则返回非凡符号，ApiProxy 取出 5 中暂存的数据，转达给原哀求，并继承原哀求的发送;不然，AMP 返回 mock 数据，ApiProxy 直接将该数据返回给原哀求。 Fetch API 对付 Fetch API 而言，由于它是基于 Promise 实现的，拦截较量轻易，只必要在 Fetch API 外层封装一个 Promise 进口，在其提倡 fetch 哀求前，先停息原哀求，理会数据哀求 AMP，并守候相应，判定相应是否有非凡相应码，假若有则继承原哀求，不然跳过原哀求，直接返回 mock 数据。 启动前端署理成果 在前端现实开拓中，可以借助打包器材，好比 webpack，自界说一个可设置的插件，开启后在开拓情形中自动将署理拦截代码插入到主页面里，从而启动前端署理成果。 小结 本文提出的前端署理要领通过将署理职责下沉到前端，镌汰了 mock 处事器(可能接口打点平台)哀求真实营业处事器步调，同时将脚色权限保持在前端哀求中，进一步镌汰了署理所必要包袱的事变量，从底层拦截 HTTP 哀求的要领，绕过了操作赏识器插件做署理带来的赏识器兼容的题目。最后提供的操作打包器材(如 webpack)封装这种署理要领，实现快速插拔的前端署理。 本文作者：邓仲哲，马蜂窝社区研发团队前端开拓工程师，首要认真社区打点靠山，接口打点平台开拓等事变。 附：参考资料 关于跨域:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS 关于XMLHTTPRequest:https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest 关于Fetch:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API 【本文是51CTO专栏作者马蜂窝技能的原创文章，作者微信公家号马蜂窝技能(ID：mfwtech)】 戳这里，，看该作者更多好文 【编辑保举】
点赞 0 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
