javascript - Javascript 中的 API 客户端

Question

我需要一点帮助来解决我项目中的问题。

场景:

首先:我有一个使用 Vue.js 开发的 SPA 网站。

其次:我在 Swagger 中也有一个 Web API 规范，我想用它来生成我的 Javascript 客户端代码。

最后:我为此使用了 swagger-codegen-cli.jar。

到目前为止我做了什么

1 - 下载最新的支持 javascript 的 swagger-codegen-cli.jar 稳定版本:

curl http://central.maven.org/maven2/io/swagger/swagger-codegen-cli/2.4.7/swagger-codegen-cli-2.4.7.jar -o swagger-codegen- cli.jar

2 - 使用以下方法生成客户端代码:

java -jar swagger-codegen-cli.jar generate -i http://192.168.0.85:32839/api/swagger/v1/swagger.json -l javascript -o ./web_api_client/

3 - 将生成的模块添加到我的项目中:

  "dependencies": {
    // ...
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "web_api_client": "file:./web_api_client"
  },

4 - 执行 npm 安装。显然，它工作正常。

5 - 此时我遇到了问题。由于某种原因，生成的模块未完全加载。

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  mounted() {
    var WebApiClient = require("web_api_client");
    var defaultClient = WebApiClient.ApiClient.instance;

    var oauth2 = defaultClient.authentications["oauth2"];
    oauth2.accessToken = "YOUR ACCESS TOKEN";

    var apiInstance = new WebApiClient.VersaoApi();
    var callback = function(error, data, response) {
      if (error) {
        console.error(error);
      } else {
        console.log('API called successfully. Returned data: ' + data);
      }
    };
    apiInstance.apiVersaoGet(callback);
  }
}

6 - var WebApiClient = require("web_api_client"); 行运行正常，没有任何错误，但不是 100% 运行。该模块的实例已创建但为空。例如，WebApiClient.ApiClient 始终未定义。

7 - 我查看了生成的代码，我认为问题与模块的加载方式有关。

(function(factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['ApiClient', 'api/VersaoApi'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS-like environments that support module.exports, like Node.
    module.exports = factory(require('./ApiClient'),  require('./api/VersaoApi'));
  }
}(function(ApiClient, VersaoApi) {
  'use strict';
 // ...

在这段代码中，两个 ifs block 都没有被执行。

有人遇到过这样的问题吗？有什么建议吗？

非常感谢，伙计们。

Answer 1

解决方案

尝试使用 require("web_api_client"); 解决问题一段时间后，我决定使用 ES6 而不是 ES5。

我在 swagger-codegen-cli.jar 中找到了一个使用 ES6 生成客户端代码的选项，如下所示:

java -jar swagger-codegen-cli.jar generate -i http://192.168.0.85:32839/api/swagger/v1/swagger.json -l javascript --additional-properties useES6=true - o ./web_api_client/

使用 ES6，我能够直接从生成的源代码中导入 javascript 模块，如下面的代码所示。

import WebApiClient from "./web_api_client/src/index";

let defaultClient = WebApiClient.ApiClient.instance;
defaultClient.basePath = 'http://192.168.0.85:32839';

// Configure OAuth2 access token for authorization: oauth2
let oauth2 = defaultClient.authentications["oauth2"];
oauth2.accessToken = "YOUR ACCESS TOKEN";

let apiInstance = new WebApiClient.VersaoApi();

apiInstance.apiVersaoGet((error, data, response) => {
  if (error) {
    console.error(error);
  } else {
    console.log("API called successfully. Returned data: " + data + response);
  }
});

当我第一次运行代码时出现错误，因为生成的模块 WebApiClient 在导出 block 中没有关键字 default。

原始生成代码

export {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient,
    // ...

改变改变

export default {
    /**
     * The ApiClient constructor.
     * @property {module:ApiClient}
     */
    ApiClient,
    // ...

现在一切正常。