javascript - 如何将 API 数据设置为带有 lit 的内部 html

Question

我有点亮的 html 元素

我将使用 get 请求设置它们的内部 html

如何设置它们？

import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators.js";
import axios from "axios";

@customElement("s-profile")
export class Profile extends LitElement {

  render() {
    return html`<p>${getProfile()}</p>`;
  }
}

// get data from api
async function getProfile(): Promise<string> {
  const username = window.location.pathname.replace("/", "");
  const result = await axios.get(
    `http://localhost:8000/api/getProfile?username=${username}`
  );
  const data: string = (<any>result).data.result.username;
  console.log(data);
  return data;
}

Answer 1

您可以使用updateRequest()

import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import axios from "axios";

@customElement("s-profile")
export class Profile extends LitElement {

  @property({ type: Object })
  data = {};

  // get user data from api
  async getProfile() {
    const username = window.location.pathname.replace("/", "");
    const result = await axios.get(
      `http://localhost:8000/api/getProfile?username=${username}`
    );
    const data: UserData = (<any>result).data.result;
    this.data = data;
    this.requestUpdate();
  }

  connectedCallback() {
    super.connectedCallback();
    this.getProfile();
  }

  render() {
    return html`<p>${this.data}</p>`;
  }
}