angular 中发送ajax请求 自带的http模块和引入axios 你用那种?

啦啦啦啦啦 我又来 的哈
今天我要说的是 ng中的 发送请求的事情，这个可是必须要讲解的 不然工作都没法进行 不是嘛 太多的理论废话 就不啰嗦了 上才艺

在 app.module.ts文件中 引入 http模块 不需要下载 是它内置的

import { HttpClientModule } from "@angular/common/http";
//  在下面的imports 中也设置一下
 imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule
  ],

然后就是在组件中使用

import { HttpClient } from "@angular/common/http";

constructor(public http:HttpClient) { }  // 赋值给当前属性

发送请求 我在本地开启了一个node服务器

 this.http.get('//localhost:5000').subscribe((res)=>{
      console.log(res);
  })

看下控制台 数据也确实回来了哈

如果是想要带参数的话 是
在请求地址后面 加上一个 对象 {params:} 后面跟着的就是 要带的参数

this.http.get('//localhost:5000',{params:{name:"zhaoyunchong"}}).subscribe((res)=>{
      console.log(res);
 })

2.说完 get 请求就要说 post请求了

import { HttpClient } from "@angular/common/http";
 this.http.post('//localhost:5000').subscribe((res) => {
      console.log(res);
    })

然后就是 axios在ng中的使用了 咋说了 可能是这个axios封装的太好了 vue react中都在用它 ng中也在用它 哈哈
axios 属于第三方的东西了 所以要用它 我们要下载好了

npm install axios --save

这个请求 我建议 封装到一个 服务中 然后 通过让组件引入 服务的方式 来使用axios

首先创建一个 服务器

ng g service service/http

// 引入 并且封装一个请求

import { Injectable } from '@angular/core';
import axios from "axios";
@Injectable({
  providedIn: 'root'
})
export class HttpService {

  constructor() { }

  axiosGet(data){
    return new Promise((resolve,reject)=>{
      axios.get(data.url).then(res=>{
        resolve(res.data);
      })
    })
  }
}

然后就是在组件中使用了 不过使用 前 也别忘了 在 app.module.ts中注册 使用

import { HttpService } from "./service/http.service";

 providers: [ HttpService ],

这下 才可以在组件中使用了
不过组件中 也要引入一次哈

import { HttpService } from "../../service/http.service";

 constructor(public axios:HttpService) { }

引入和注册成功之后 就可以使用了

// 调用 我们在服务中 封装好的方法 传入地址

this.axios.axiosGet({ url:"//localhost:5000"}).then(res=>{
      console.log(res);
    })

数据也是正常回来了

关注我 持续更新前端知识