Angular 中的数据交互GET POST

1 Angular get 请求数据

Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块

在 app.module.ts 中引入 HttpClientModule 并注入

java 复制代码
import {HttpClientModule} from '@angular/common/http'
imports: [ BrowserModule, HttpClientModule ]

在用到的地方引入 HttpClient 并在构造函数声明

java 复制代码
import {HttpClient} from "@angular/common/http";
constructor(public http:HttpClient) { }

get 请求数据

java 复制代码
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 并注入

java 复制代码
import {HttpClientModule} from '@angular/common/http';
imports: [ BrowserModule, HttpClientModule ]

在用到的地方引入 HttpClient、HttpHeaders 并在构造函数声明 HttpClient

java 复制代码
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(public http:HttpClient) { }

post 提交数据

java 复制代码
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 的基本步骤:

  1. 安装 Axios:首先,确保你已经在 Angular 项目中安装了 Axios。你可以使用 npm 或 yarn来安装它。在终端中运行以下命令之一:
java 复制代码
npm install axios
  1. 导入 Axios:在你的 Angular 组件或服务中,你需要导入 Axios。在你的模块文件中,添加以下代码:
java 复制代码
import axios from 'axios';
  1. 在组件或服务中使用 Axios:现在你可以在组件或服务中使用 Axios 来发送 HTTP 请求。下面是一个简单的示例:
java 复制代码
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 等)。

  1. 配置 Axios 拦截器:如果你需要在每个请求被发送之前或之后执行某些操作(如添加请求头、处理错误等),你可以使用 Axios 拦截器。在主模块文件中(通常是 app.module.ts),添加以下代码来配置拦截器:
java 复制代码
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` 数组中。
相关推荐
清灵xmf16 分钟前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据23 分钟前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_3901617731 分钟前
防抖函数--应用场景及示例
前端·javascript
334554321 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test1 小时前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript