@abraham/remotedata 中文文档教程

发布于 3年前 浏览 25 项目主页 更新于 3年前

版本状态构建状态依赖状态npm bundle size (minified + gzip)Coverage Status

RemoteData

轻量级 TypeScript RemoteData 实现

Install

npm install @abraham/remotedata

Usage

阅读 Slaying a UI Antipattern with Web Components (and TypeScript) 以获得更全面的指南。

这是一个从远程 HTTP API 获取推文(类型 Status)的示例类。

import { Failure, fold, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
import { Status } from 'twitter-d';

// Define what the RemoteData Failure and Success types will be.
type State = RemoteData<number, Status>;

class Thing {
  // Set the initial state as Initialized.
  private state: State = new Initialized();

  constructor() {
    // On instantiation start the remote call and render the current state.
    this.getStatus();
    this.render();
  }

  private async function getStatus() {
    // Before starting the remote call set the current state to Pending.
    this.state = new Pending();
    // Perform the actual remote request.
    const response = await fetch('https://api.example.com/tweet');
    if (response.ok) {
      // If the request succeeds set the state to Success with the returned data.
      const status: Status = await response.json();
      this.state = new Success(status);
    } else {
      // If the request does not succeed set the state to Failure with the reason.
      this.state = new Failure(status_code);
    }
    // Render the new state.
    this.render();
  }

  private get view(state: State): (state: State) => string {
    // Use `fold` to easily define logic based on the current state.
    // Fold takes four methods as parameters in the order of Initialized, Pending, Failure, and
    // Success and returns a method that takes a `RemoteData` state instance as a parameter. When
    // the returned method gets called with a `RemoteData` state, the method matching the correct
    // state gets called.
    return fold<string, number, Status>(
      // What to do if the state is Initialized.
      () => 'Initialized',
      // What to do if the request is Pending.
      () => 'Loading...',
      // What to do if the request fails.
      (error: number) => `Error: ${error}`,
      // What to do if the request succeeds.
      (status: Status) => `Got tweet from ${status.screen_name}`,
    );
  }

  private render(): string {
    // Render the current state in your UI.
    // `this.view` returns a method which is executed with the current state as a parameter.
    const text: string = this.view(this.state);
    // Maybe put it in a template.
  }
}

使用包含的类型保护

import { RemoteData } from '@abraham/remotedata';
import { Status } from 'twitter-d';
import { getState } from './state';

// Define what the RemoteData Failure and Success types will be.
type State = RemoteData<number, Status>;

const state: State = getState();
if (isSuccess(state)) {
  // state is known to be of type Success<Status>
  console.log(state.data.full_text);
}

References

Version StatusBuild StatusDependency Statusnpm bundle size (minified + gzip)Coverage Status

RemoteData

Lightweight TypeScript RemoteData implementation

Install

npm install @abraham/remotedata

Usage

Read Slaying a UI Antipattern with Web Components (and TypeScript) for a more thorough guide.

This is an example class that gets a tweet (type Status) from a remote HTTP API.

import { Failure, fold, Initialized, Pending, RemoteData, Success } from '@abraham/remotedata';
import { Status } from 'twitter-d';

// Define what the RemoteData Failure and Success types will be.
type State = RemoteData<number, Status>;

class Thing {
  // Set the initial state as Initialized.
  private state: State = new Initialized();

  constructor() {
    // On instantiation start the remote call and render the current state.
    this.getStatus();
    this.render();
  }

  private async function getStatus() {
    // Before starting the remote call set the current state to Pending.
    this.state = new Pending();
    // Perform the actual remote request.
    const response = await fetch('https://api.example.com/tweet');
    if (response.ok) {
      // If the request succeeds set the state to Success with the returned data.
      const status: Status = await response.json();
      this.state = new Success(status);
    } else {
      // If the request does not succeed set the state to Failure with the reason.
      this.state = new Failure(status_code);
    }
    // Render the new state.
    this.render();
  }

  private get view(state: State): (state: State) => string {
    // Use `fold` to easily define logic based on the current state.
    // Fold takes four methods as parameters in the order of Initialized, Pending, Failure, and
    // Success and returns a method that takes a `RemoteData` state instance as a parameter. When
    // the returned method gets called with a `RemoteData` state, the method matching the correct
    // state gets called.
    return fold<string, number, Status>(
      // What to do if the state is Initialized.
      () => 'Initialized',
      // What to do if the request is Pending.
      () => 'Loading...',
      // What to do if the request fails.
      (error: number) => `Error: ${error}`,
      // What to do if the request succeeds.
      (status: Status) => `Got tweet from ${status.screen_name}`,
    );
  }

  private render(): string {
    // Render the current state in your UI.
    // `this.view` returns a method which is executed with the current state as a parameter.
    const text: string = this.view(this.state);
    // Maybe put it in a template.
  }
}

Using included type guards.

import { RemoteData } from '@abraham/remotedata';
import { Status } from 'twitter-d';
import { getState } from './state';

// Define what the RemoteData Failure and Success types will be.
type State = RemoteData<number, Status>;

const state: State = getState();
if (isSuccess(state)) {
  // state is known to be of type Success<Status>
  console.log(state.data.full_text);
}

References

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文