关于前端ajax请求的优雅方案（http客户端为axios）

站长资源 2024/11/24 佚名

2 0 1

前言

AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创建交互式网页应用的网页开发技术方案。

异步的JavaScript：

使用【JavaScript语言】以及相关【浏览器提供类库】的功能向服务端发送请求，当服务端处理完请求之后，【自动执行某个JavaScript的回调函数】。

PS：以上请求和响应的整个过程是【偷偷】进行的，页面上无任何感知。

下面话不多说了，来一看看本文的正文。

本文http客户端为axios

先讲个故事

类似axios这种支持Promise的API已经很友好了，请求成功后我们可以从then的Response中拿到后端返回的数据。比如：

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

数据在response.data中，这意味着我们每个请求都需要多做一次处理才能拿到实际的数据。

然后，实际场景后端基本不会直接把数据给我们，他会做一层封装，比如response.data的结构会是这样：

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

所以，response.data.obj才是我们真正要的数据啊喂，所以我们每个请求都需要再多做一次处理=_=

突然有一天，后端说，“response.data不再是对象，改成了JSON字符串，你做一下处理~”。

然后是的，每个接口，是每一个，我们都需要改成JSON.parse(response.data).obj，半条命哦！

如果，后端再说，“我又改回对象了，你撤销之前的处理吧~”。。。

如果，后端又说，“不是所有的都是对象，有一些还是JSON字符串，具体你看下更新的接口文档~”。。。

如果，我们不曾相遇。。。

后来的我们

ES6 Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

要解除上述苦恼，我们需要对所有的接口请求做统一的封装。如此一来，就算后端改来改去，我们只需修改一个地方甚至不用修改！

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' "htmlcode">

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });


“你随便改，我改一下算我输！”
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

前端发送ajax请求,前端ajax请求数据, 前端模拟ajax请求测试

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“关于前端ajax请求的优雅方案（http客户端为axios）”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

关于前端ajax请求的优雅方案（http客户端为axios）

快速解决ajax请求出错状态码为0的问题

ajax跨域获取网站json数据的实例

评论“关于前端ajax请求的优雅方案（http客户端为axios）”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接