Javascript 如何在Aurelia中替代HttpClient？

我对奥雷莉亚是全新的

您将如何更改以下代码以提供一个虚拟HttpClient，例如一个json读取器，它只提供一组静态的json数据，而不需要开发中的服务器

从“aurelia框架”导入{inject}；
从'aurelia fetch client'导入{HttpClient}；
@注入（HttpClient）
导出类用户{
标题='Github用户'；
用户=[]；
构造函数（http）{
http.configure（配置=>{
配置
.useStandardConfiguration（）
.withBaseUrl（'https://api.github.com/');
});
this.http=http；
}
激活（）{
返回此.http.fetch（'用户'）
.then（response=>response.json（））
.然后（users=>this.users=users）；
}
}

要将原始帖子中的演示代码转换为我们可以替代HttpClient实现的状态，需要几个步骤

第一步 删除类的构造函数中的配置代码

这些线路：

users.js

。。。
http.configure（配置=>{
配置
.useStandardConfiguration（）
.withBaseUrl（'https://api.github.com/');
});
...

应移动到

main.js

文件：

main.js

导出功能配置（aurelia）{ 奥雷莉亚。用途 .standardConfiguration（） .developmentLogging（）； configureContainer（aurelia.container）；//a.setRoot（）； } 函数配置容器（容器）{ 让http=newhttpclient（）； http.configure（配置=>{ 配置 .useStandardConfiguration（） .withBaseUrl（'https://api.github.com/'); }); container.registerInstance（HttpClient，http）；//response.json（） .然后（users=>this.users=users）； } } 步骤2： 模拟HttpClient

user.js模块仅使用

fetch

方法，该方法返回具有

json

方法的

Response

对象。下面是一个简单的模拟：

let mockUsers=[…todo:创建模拟用户数据…]；
让httpMock={
fetch:url=>Promise.resolve({
json:（）=>mockUsers
})
};

步骤3： 重新配置容器以使用http模拟：

在步骤1中，我们向

main.js

模块添加了一个

configureContainer

函数，该模块在容器中注册了一个已配置的HttpClient实例。如果我们想使用模拟版本，

configureContainer

函数将更改为：

main.js

。。。
让mockUsers=[…todo:创建模拟用户数据…]；
让httpMock={
fetch:url=>Promise.resolve({
json:（）=>mockUsers
})
};
函数配置容器（容器）{
container.registerInstance（HttpClient，httpMock）；
}

---

有关在此处配置容器的更多信息：

要将原始帖子中的演示代码转换为我们可以替代HttpClient实现的状态，需要几个步骤

第一步 删除类的构造函数中的配置代码

这些线路：

users.js

。。。
http.configure（配置=>{
配置
.useStandardConfiguration（）
.withBaseUrl（'https://api.github.com/');
});
...

应移动到

main.js

文件：

main.js

导出功能配置（aurelia）{ 奥雷莉亚。用途 .standardConfiguration（） .developmentLogging（）； configureContainer（aurelia.container）；//a.setRoot（）； } 函数配置容器（容器）{ 让http=newhttpclient（）； http.configure（配置=>{ 配置 .useStandardConfiguration（） .withBaseUrl（'https://api.github.com/'); }); container.registerInstance（HttpClient，http）；//response.json（） .然后（users=>this.users=users）； } } 步骤2： 模拟HttpClient

user.js模块仅使用

fetch

方法，该方法返回具有

json

方法的

Response

对象。下面是一个简单的模拟：

let mockUsers=[…todo:创建模拟用户数据…]；
让httpMock={
fetch:url=>Promise.resolve({
json:（）=>mockUsers
})
};

步骤3： 重新配置容器以使用http模拟：

在步骤1中，我们向

main.js

模块添加了一个

configureContainer

函数，该模块在容器中注册了一个已配置的HttpClient实例。如果我们想使用模拟版本，

configureContainer

函数将更改为：

main.js

。。。
让mockUsers=[…todo:创建模拟用户数据…]；
让httpMock={
fetch:url=>Promise.resolve({
json:（）=>mockUsers
})
};
函数配置容器（容器）{
container.registerInstance（HttpClient，httpMock）；
}

---

有关在此处配置容器的更多信息：

在开发过程中，还可以为应用程序提供静态数据。导航框架已经带有Gulp和BrowserSync，所以我们用它们来伪造API调用

假设您从

/api

虚拟目录加载JSON数据，例如

GET /api/products

在这种情况下，你只需要两件事来伪装它

将模拟数据放入文件中 转到Aurelia应用程序的根文件夹，创建一个

/api

文件夹

创建一个

/api/products

子文件夹，并放置一个名为

GET.json

的新文件。此文件应包含JSON，例如

GET.json

[ { "id": 1, "name": "Keyboard", "price": "60$" },
  { "id": 2, "name": "Mouse", "price": "20$" },
  { "id": 3, "name": "Headphones", "price": "80$" }
]

配置BrowserSync以模拟API调用 导航到

/build/tasks

文件夹并编辑

service.js

文件。将服务任务的定义更改为以下代码：

gulp.task('serve', ['build'], function(done) {
  browserSync({
    online: false,
    open: false,
    port: 9000,
    server: {
      baseDir: ['.'],
      middleware: function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');

        // Mock API calls
        if (req.url.indexOf('/api/') > -1) {
          console.log('[serve] responding ' + req.method + ' ' + req.originalUrl);

          var jsonResponseUri = req._parsedUrl.pathname + '/' + req.method + '.json';

          // Require file for logging purpose, if not found require will 
          // throw an exception and middleware will cancel the retrieve action
          var jsonResponse = require('../..' + jsonResponseUri);

          // Replace the original call with retrieving json file as reply
          req.url = jsonResponseUri;
          req.method = 'GET';
        }

        next();
      }
    }
  }, done);
});

现在，当您运行

gulp service

时，BrowserSync将处理API调用，并从磁盘上的静态文件为它们提供服务

---

您可以在my中看到一个示例，在my中可以看到更多描述。

在开发过程中还可以为应用程序提供静态数据。纳维