破除js http axios请求的蛋疼异步，治一治Promise的神奇同步

1999笃行

于 2023-06-01 12:12:39 发布

阅读量220

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_29712303/article/details/130985588

版权

在Vue2应用中，为了在所有功能执行前获取服务器的授权信息，作者尝试使用axios但未能实现同步。最终，通过使用原生JavaScript的XMLHttpRequest同步请求解决了问题，实现了数据先加载，再渲染页面的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在vue 2 的相关项目中，有这样一个需求：从服务器中获取授权信息，在页面中调用相应的组件及处理其他数据；此过程需要在vue所有功能之前执行。

解决方法

最开始使用axios执行数据请求（我不知道 axios 如何设置同步），返回的数据是 Promise 的。
在使用时，无论如何，都没有达到先加载数据，再渲染页面的需求。
最终只能选择原始的js的数据请求XMLHttpRequest()

let xhr = new XMLHttpRequest();//细查此方法的更多使用说明，此处简略记录
xhr.open('get', url, false);//false-同步	

xhr.send(null);
if (xhr.status != 200) {}else{}
xhr.responseText;//响应文本

还是原生好弄