angularhttp客户端信息

Question

谁能给我解释一下这段代码？

getAll() {
    return this.http.get<User[]>(`${environment.config.apiUrl}/users`);
}

此代码取自此 stackblitz https://stackblitz.com/edit/authenticationdemo?file=src%2Fapp%2Fservices%2Fuser.service.ts 的 user.service.ts 我知道 environment.config 是在 environments/environment.ts 中声明的变量，但我不明白它的含义：

export const environment = {
    production: false,
    config: <any> ""
};

我也不明白'apiUrl'这是什么方法，在哪引用的？我正在寻找解释，关于它的文档也很好，我已经尝试过但我没有在官方文档中找到任何内容。这种'http.get'代码的表示有名字吗？谢谢朋友

Answer 1

我建议您先熟悉 Typescript 语法。

get<User[]>(...) 表示此函数的输出是 User[] 数据类型。尖括号的用法是 Typescript 中泛型的语法，就像在 .NET 中一样。

`${environment.config.apiUrl}/users`

注意``。这不是字符串语法，而是字符串文字或字符串模板或 template literals 的语法。所有这些都是纯粹的语法糖。 ${variableName} 可以在模板文字中使用，以替换其在最终字符串中的值。在这种情况下，代码打算替换字符串中 environment.config.apiUrl 的值。

现在，在 environment 对象中，配置属性当前有一个字符串值。 <any> "" 语法是将空字符串的数据类型转换为 "any".

为了让您的代码正常工作，您想将空字符串更改为一个对象。像这样：

config: <any> {
    apiUrl: "http://your-api-domain/"
}

现在，您的 apiUrl 已在 environment.config 对象中定义。附注：<any> 类型转换不是必需的。

Answer 2

让我们一步步来吧。

return this.http.get<User[]>(`${environment.config.apiUrl}/users`);

http 是从 angular 服务中注入的 HttpClient 实例

get 是一个函数，它将对目标参数 url

执行 http GET 请求

<User[]> 是一个通用类型，表示 http get 将 return 是那些 Observable 的一个可观察对象，它的存在是为了确保类型安全。

environment.config 是任意类型。这意味着在编译期间，它不是类型安全的，您可以访问任何属性，即使它存在与否。

当你访问它时，它是未定义的值，不会抛出错误。由于服务是假的并且值无关紧要，因此代码有效

angularhttp客户端信息

angular http client information

typescript

angular

angular-httpclient