Блог

Главная - Вопросы по программированию - Как использовать клиент Axios API, созданный генератором кода OpenAPITools?

Как использовать клиент Axios API, созданный генератором кода OpenAPITools?

#typescript #axios

#typescript #axios

Вопрос:

Я использую Swagger / OpenAPI Codegen для создания клиента API для клиента выборки в моем приложении Vue и хочу использовать Axios вместо этого. Я начал с использования OpenAPITools typescript-генератора кода axios:

 java -jar .openapi-generator-cli.jar generate -i http://localhost:5000/swagger/v1/swagger.json -g typescript-axios -o appapi

Затем я попытался присвоить введенный ответ локальной переменной того же типа:

 @Component
export default class Themes extends Vue {
  private themesApi!: ThemesApi;
  private themes: Theme[];

  constructor() {
    super();
    this.themes = [];
  }

  private async mounted() {
    const apiConfig: Configuration = {
      basePath: config.API_URL,
    };

    this.themesApi = new ThemesApi(apiConfig);
  }

  private async getThemes() {
    this.themes = await this.themesApi.getThemes();
  }
}

Однако при этом возникла следующая ошибка TypeScript:

 > 139:5 Type 'AxiosResponse<Theme[]>' is missing the following
> properties from type 'Theme[]': length, pop, push, concat, and 28
> more.
>     137 | 
>     138 |   private async getThemes() {
>   > 139 |     this.themes = await this.themesApi.getThemes();
>         |     ^

Локальная переменная имеет тот же тип:
Скриншот, показывающий, что локальная переменная имеет тот же тип.

Итак, почему возникает эта ошибка?

Комментарии:

1. Удалось ли вам заставить codegeneration работать с Swagger / OpenAPI на Axios с помощью Vue? Было бы здорово, если бы вы могли опубликовать это.

2. нашел это — github.com/johndpope/openapi-typescript-client-api-generator

3. @TomasBjerre Я перешел на использование NSwag / NSwag Studio вместо этого, для меня работает лучше. github.com/RicoSuter/NSwag

4. хорошо, я тоже решил это: github.com/tomasbjerre/pom-dependency-analyzer-web-frontend /…

Ответ №1:

Взгляните на типы для Axios, в частности AxiosResponse :https://github.com/axios/axios/blob/master/index.d.ts#L70

Вы увидите, что он принимает универсальный, в вашем случае Theme , который будет доступен через data свойство. Итак, вам нужно будет получить значение, используя что-то вроде следующего:

 private async getThemes() {
  const response = await this.themesApi.getThemes();
  this.themes = response.data;
}