Javascript Aurelia JS-发出同步HTTP请求，在页面加载之前更改数据？

我正在使用联系人列表教程：

。。。我想更改它，所以应用程序首先以“单击我”按钮开始。单击此按钮后，将发出一个web请求，该请求将返回JSON联系人数据。如果请求成功，响应应更新联系人的主数据存储，页面应以呈现新联系人列表开始；如果请求失败，页面应显示联系人的原始（硬编码）列表

可以在上找到原始联系人列表应用程序的副本（目前仅限Chrome）；我为实现上述功能所做的更改如下：

这就是我尝试做的-首先，对开始按钮（也在中）进行了更改。 *然后，在

webapi.js

中有一个新的

setContactList

函数，它应该允许更改数据容器变量。 *单击开始“单击我”按钮后，将加载

app clist.*

。在

app clist.js

中，有一个PHP代码构造了一个新的联系人列表，由于我没有简单的方法上传和运行服务器PHP代码，我将该PHP代码发送给处理它的人，并返回结果（另请参见）这是在

constructor（）

函数中完成的，因此，

app clist.js

中的对象第一次加载时（在单击开始按钮之后）。如果此web调用成功，则调用

setContactList

更改联系人列表

所以，问题就在这里——web调用都成功了，但它们发生得太晚了——在页面呈现之后。单击开始按钮后，首先呈现页面（带有旧联系人）；然后我得到一个警告：

An embedded page at gist.host says:

{"result":"[{\"id\":\"1\",\"firstName\":\"Bob\",\"lastName\":\"Glass\",\"email\":\"bob@glass.com\",\"phoneNumber\":\"243-6593\"},{\"id\":\"2\",\"firstName\":\"Chad\",\"lastName\":\"Connor\",\"email\":\"chad@connor.com\",\"phoneNumber\":\"839-2946\"}]"}

。。。这意味着web调用成功，然后出现第二个警报：

An embedded page at gist.host says:

setContactList 2 2

。。。这表明接收到的联系人数组和原始联系人数组的长度相同，这意味着发生了更新。不过，事情发生得很晚

这提醒了我，JavaScript中的HTTP调用往往是异步的——也就是说，它们只会启动进程，在完成之前不会阻塞其余的代码。这可能是aurelia http客户端的情况，我在这里使用了：

this.http.createRequest('https://phpfiddle.org/api/run/code/json')
 .asPost()
 .withHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8')
 .withContent("code="+encphpcode)
 .send()
 .then(response => {
     alert(response.response);
     console.log(response);
     var respobj = JSON.parse(response.response);
     var respdataArr = JSON.parse(respobj.result);
     this.api.setContactList(respdataArr);
 }).catch(err => {
     console.log(err);
 });

因此，对于我的概念-我在页面生命周期的开始调用服务，它返回第一次显示时应该在页面上呈现的数据-我必须进行同步调用，这将阻止

app clist

中的

构造函数（）

的执行，直到它完成（成功或失败），以便在页面呈现开始之前更新数据

所以我的问题是：如何使用Aurelia JS进行同步HTTP调用？或者，是否可以像我这里的示例那样使用异步调用，如果可以，如何使用

以下是一些更相关的文件供参考：

app clist.html

app clist.js

从“/WebAPI”导入{WebAPI}；
从“aurelia http客户端”导入{HttpClient}；
//对于多行字符串，请使用backticks``-ES6模板文本。
设phpcode=`
`; 
导出类AppClist{//在要点中，它错误地仍然是App
静态注入（）{return[WebAPI，HttpClient]；}
构造函数（api、http）{
this.api=api；
this.http=http；
var phpcodesl=phpcode.replace（/（？：\r\n |\r |\n）/g'）；
var encphpcode=encodeURIComponent（phpCodes）；//urlencode
//警报（encphpcode）；
//注意：gist.run due https将不允许从http加载
//这是http.post（“https://phpfiddle.org/api/run/code/json“，”code=“+encphpcode）
//.then（response=>{alert（response.response）；console.log（response）；}）//不工作
//这确实有效：
this.http.createRequest（'https://phpfiddle.org/api/run/code/json')
.asPost（）
.withHeader（'Content-Type'，'application/x-www-form-urlencoded；charset=utf-8'）
.withContent（“code=“+encphpcode”）
.send（）
。然后（响应=>{
警报（响应，响应）；
控制台日志（响应）；
var respobj=JSON.parse（response.response）；
var respdatarr=JSON.parse（respobj.result）；
这个.api.setContactList（respdatarr）；
}).catch（错误=>{
控制台日志（err）；
})
;
}
//无配置路由器（配置，路由器）{此处与app.js中相同！
/**/配置路由器（配置，路由器）{
config.title='Contacts'；
config.map([
//此处必须包含空路由“”，否则在开始时“未找到路由”
{route:[''，'contacts']，视口：{chldrt:{moduleId:'no selection'}}，title:'Select'}，
{route:'contacts/:id'，视口：{chldrt:{moduleId:'contact-detail'}}，名称：'contacts'}
]);
this.router=路由器；
}
}

app.html

app.js

从“/WebAPI”导入{WebAPI}；
导出类应用程序{
静态注入（）{return[WebAPI]；}
构造函数（api）{
this.api=api；
}
配置路由器（配置，路由器）{
config.title='应用程序联系人'；
config.map([
{路由：''，视口：{mainrt:{moduleId:'btn start'}}，标题：'start'}，
{route:'app clist'，视口：{mainrt:{moduleId:'app clist'}，chldrt:{moduleId:'no selection'}}，name:'app clist'，title:'C List'}/,，
//{route:'contacts'，视口：{chldrt:{moduleId:'no selection'}}，title:'Select'}，
//{route:'contacts/:id'，视口：{chldrt:{moduleId:'contact-detail'}}，名称：'contacts'}
]);
this.router=路由器；
}
}

btn start.html

点击这里开始！

btn start.js

从“/WebAPI”导入{WebAPI}；
从'aurelia Router'导入{Router}；
从“/App”导入{App}；
出口c