1 Angular get 请求数据
Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块
在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http'
imports: [ BrowserModule, HttpClientModule ]
在用到的地方引入 HttpClient 并在构造函数声明
import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }
get 请求数据
var api = "http://localhost:3000/info";
this.http.get(api).subscribe(response => {console.log(response);
});
2 Angular post 提交数据
Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。
在 app.module.ts 中引入 HttpClientModule 并注入
import {HttpClientModule} from '@angular/common/http';
imports: [ BrowserModule, HttpClientModule ]
在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }
post 提交数据
const httpOptions={ headers:newHttpHeaders({'Content-Type':'application/json'})
};
var api="http://127.0.0.1:3000/doLogin";
this.http.post(api,{username:'张三',age:'20'},httpOptions).subscribe(response=>{
console.log(response);
});
3 axios 请求数据
见我的另一文章 https://blog.csdn.net/zs18753479279/article/details/128669340
在 Angular 中使用 Axios 是一种常见的做法，Axios 是一个流行的 HTTP 客户端库，可以方便地发送 HTTP 请求和处理响应。下面是在 Angular 中使用 Axios 的基本步骤：
- 安装 Axios：首先，确保你已经在 Angular 项目中安装了 Axios。你可以使用 npm 或 yarn来安装它。在终端中运行以下命令之一：
npm install axios
- 导入 Axios：在你的 Angular 组件或服务中，你需要导入 Axios。在你的模块文件中，添加以下代码：
import axios from 'axios';
- 在组件或服务中使用 Axios：现在你可以在组件或服务中使用 Axios 来发送 HTTP 请求。下面是一个简单的示例：
import { Component } from '@angular/core';
import axios from 'axios'; @Component({ selector: 'my-component', templateUrl: './my-component.html'
})
export class MyComponent { data: any; constructor() { axios.get('https://api.example.com/data') .then(response => { this.data = response.data; }) .catch(error => { console.error(error); }); }
}
在上面的示例中，我们使用 axios.get 方法发送一个 GET 请求到指定的 URL，然后使用 .then 方法处理成功的响应，并使用 .catch 方法处理错误。你可以根据自己的需求使用其他 HTTP 方法（如 POST、PUT、DELETE 等）。
- 配置 Axios 拦截器：如果你需要在每个请求被发送之前或之后执行某些操作（如添加请求头、处理错误等），你可以使用 Axios 拦截器。在主模块文件中（通常是 app.module.ts），添加以下代码来配置拦截器：
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import axios from 'axios';
import { ErrorHandler } from '@angular/core'; export class AxiosErrorInterceptor implements ErrorHandler { handleError(error: HttpErrorResponse) { if (error.request) { // 发送请求时发生错误，可以在这里处理 } else if (error.message) { // 处理其他错误信息（非请求错误）的通用逻辑，可以在这里处理错误信息并返回给用户等操作。 } else { // 处理其他错误情况，可以在这里处理未知错误等操作。 } }
} @NgModule({ imports: [HttpClientModule], providers: [HttpClientModule, { provide: ErrorHandler, useClass: AxiosErrorInterceptor }] // 将拦截器绑定到全局的 ErrorHandler 实现上。这将处理所有的 HTTP 错误请求，包括从组件或服务中的 Axios 请求返回的错误。注意这需要将 `AxiosErrorInterceptor` 类添加到 `providers` 数组中。
