@abiskup/ts-rest-client 中文文档教程

Question

ts-rest-client

ts-rest-client 是一个用于使用 RESTful 服务的小而简单的包。 它允许您非常容易地检索类型化的响应数据，并且独立于客户端实现。

An Example using the Axios RestClient implementation

ts-rest-client 带有使用 axios 的实现。

对于此示例，我们假设您想要使用允许您检索汽车的 RESTful 服务。 我们还假设资源公开在 http://localhost:8080/api/cars。 这是汽车的类型定义： ```打字稿 接口车{ 名称：字符串； 品牌：字符串； }

#### 1. Create a RestResource class
First we need to create a class that inherits from RestResource, which specifies the available requests.
We implement a method called getCars for retrieving all cars: 

打字稿 类 CarRestResource 扩展 RestResource {

getCars = (): Promise<Car[]> => {
    return this.get({
        url: 'http://localhost:8080/api/cars'
    });
}

}

We expect to retrieve an array of cars, thus we specify `Promise<Car[]>` as return type.
We call `this.get()` and pass an request-object as the only paremeter. 
Here´s the definition of the `GetRequest` object: 

打字稿 接口获取请求{ 网址？：字符串； 标头？：标头[]； }

#### 2. Create an Axios client:

打字稿 const restClient = new AxiosRestClient();

#### 3. Create an instance of CarRestResource and pass the client

打字稿 const carRestResource = new CarRestResource(restClient);

#### 4. Use your RestResource

打字稿 carRestResource.getCars().then( （汽车）=> { // cars 现在是 Car[] 类型 const firstCar = 汽车[0]; //汽车是汽车类型 console.log(firstCar.name); } )

### Using baseUrl and basePath
AxiosRestClient allows you to specify the `baseUrl` of your server. In your RestResource class you can specify the `basePath` of your resource:

打字稿 const restClient = new AxiosRestClient('http://localhost:8080'); //

baseUrl class CarRestResource extends RestResource {

protected basePath = '/api/cars'; // basePath

getCars = (): Promise<Car[]> => {
    return this.get();
}

getCar = (carId: number): Promise<Car> => {
    return this.get({
        url: `/${carId}`
    });
}

}

const carRestResource = new CarRestResource(restClient);

As a result, when you call `carRestResource.getCars()` the url of the request is going to be `baseUrl` + `basePath` + `request.url`: `http://localhost:8080/api/cars`.
And for `carRestResource.getCar(1)` the url is going to be: `http://localhost:8080/api/cars/1`.

This separation of baseUrl and basePath only makes sense if you plan to use multiple RestResource classes.

打字稿 class CustomerRestResource extends RestResource {

basePath = '/api/customers';

getCustomers = (): Promise<Customer[]> => {
    return this.get();
} 

}

const customerRestResource = new CustomerRestResource(restClient); // 我们使用与 CarRestResource 相同的 restClient

customerRestResource.get(); // http://localhost:8080/api/客户 ```