stenciljs中的http请求

Andi Erni 发表于 Dev

安迪·艾尔尼（Andi Erni）

如何在StencilJS中发出HTTP请求（GET / POST / PUT / DELETE）？

我尝试使用axios如下：npm install axios --save在模板组件中做了和import axios from 'axios';。致电后，axios.get(...)我会收到以下错误消息：

[错误]捆绑：node_modules / axios / lib / adapters / http.js，第4行

模块无法导入自身

L3：var utils = require（'./../ utils'）;

L4：变量结算= require（'./../ core / settle'）;

L5：var buildURL = require（'./../ helpers / buildURL'）;

我了解这可能与以下问题有关：https : //github.com/ionic-team/stencil/issues/98

但是，有关如何获取html请求的任何建议都可以在模板组件中使用？

安迪·艾尔尼（Andi Erni）

我们可以使用fetchAPI。它是浏览器本地的，因此不需要导入。StencilJS也有一个polyfill，所以它可以在任何地方使用。

感谢@insanicae向我指出。

例：

import { Component, State } from '@stencil/core';

@Component({
  tag: 'app-profile',
  styleUrl: 'app-profile.css'
})
export class AppProfile {
  @State() name: string;

  componentWillLoad() {
    fetch('https://api.github.com/users/ErvinLlojku')
      .then((response: Response) => response.json())
      .then(response => {
        this.name = response['name'];
      });
  }

  render() {
    return [
      <ion-header>
        <ion-toolbar color="primary">
          <ion-buttons slot="start">
            <ion-back-button defaultHref="/" />
          </ion-buttons>
          <ion-title>Profile: {this.name}</ion-title>
        </ion-toolbar>
      </ion-header>,

      <ion-content padding>
        <p>My name is {this.name}.</p>

      </ion-content>
    ];
  }
}

有关更多信息，请查阅fetch的官方文档。https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。