6

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

我尝试按如下方式使用 axios：Did npm install axios --saveand in the stencil component import axios from 'axios';。一旦我打电话，axios.get(...)我就会收到以下错误消息：

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

模块不能自行导入

L3: var utils = require('./../utils');

L4: var set = require('./../core/settle');

L5: var buildURL = require('./../helpers/buildURL');

我知道这可能与这个问题有关：https ://github.com/ionic-team/stencil/issues/98

但是，关于如何在模板组件中获取 html 请求的任何建议？

4

2 回答 2

13

我们可以使用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/en-US/docs/Web/API/Fetch_API

于 2017-11-14T09:37:00.397 回答
0

您甚至可以使用我的组件来使用 Fetch API，只需删除 URL 并监听 OK 或 KO 事件。

于 2017-11-16T14:07:29.703 回答