在Angular中配置Http请求及请求跨域
开说之前要提一句,我这个是博客基于我用angular cli创建的项目,angular版本是8.X,如果和你手动搭建的有什么细微差别的,请自己排查一下。
angular的目录结构我就不多说了,我就直接讲在哪个文件,在那个模块里配置什么:
-
在
app.module.ts
中引入我们http请求模块:// 引入angular的内置请求模块 import {HttpClientModule} from '@angular/common/http'
要使用http请求,没有这个模块,就像盖楼没地基。。。。。
-
在
app.module.ts
的模块配置中,配置我们引入的http请求模块:// 配置模块 imports: [ BrowserModule, // 请求模块 HttpClientModule ]
-
配置完成后,就是使用了,如果使用了组件,那我们在组件中使用http请求时,还需要在对应的组件ts文件里,手动引入我们的http请求服务:
3.1. 如果只是单单使用get请求
// 在组件中引入http请求服务---get请求 import {HttpClient} from '@angular/common/http'
3.2. 如果还要用post请求的话,还需要引入httpHeaders
// 如果是post请求,还需要引入httpHeaders import {HttpClient,HttpHeaders} from '@angular/common/http'
-
然后在我们组件的ts文件的constructor构造器中声明一下即可
// 声明 constructor(public http:HttpClient) { }
配置完,我们下一步面临的就是使用http请求服务了,下面我分别演示一下,get请求和post请求的代码示例:
-
get请求代码示例“
// get请求 let api:any = "http://www.jiekou.com/id"; // 这里是你请求的接口 this.http.get(api).subscribe((response:any)=>{ console.log(response); })
-
post请求代码示例:【post请求需要先定义请求类型】
// 首先定义请求类型【固定写法】 const httpOptions = {headers:new HttpHeaders({'Content-Type':'application/json'})}; // 定义你的api var api = 'http://127.0.0.1:3000/dologin'; // 第一个参数请求地址,第二个参数传输的数据,第三个参数就是定义的请求类型 this.http.post(api,{"username":"张三","age":20},httpOptions).subscribe((response)=>{ console.log(response); });
当然说到请求,还有一个不得不提的东西,那就是请求的跨域问题。
跨域是什么,有什么问题,我就不再赘述了,我来说一下怎么去解决这个跨域问题,这才是重点【我使用的是jsonp去解决跨域问题】
-
用jsonp解决跨域请求问题,还需要在
app.module.ts
中引入HttpClientJsonpModule模块// 如果需要用到jsonp解决跨域请求问题,还需要引入HttpClientJsonpModule import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'
注意:不要和上面的配置post请求时引入的模块搞混了,这两个配置所处的文件是不同的。
-
同样,需要在
app.module.ts
文件的import配置模块声明一下:// 如果用到了JOSNP,那么也需要在模块配置中配置一下 imports: [ BrowserModule, HttpClientModule, HttpClientJsonpModule ]
-
在展示jsonp请求代码之前,有几点要提一下:
3.1. 如果你的后台代码不允许跨域,那么我们用jsonp去解决跨域没啥问题。
3.2. jsonp请求有个前提就是,你的服务器需要支持jsonp请求。
3.3. 当然,如果你的后台允许你进行跨域请求,那你正常请求即可,不需要用到jsonp。
3.4. 展示JSONP请求代码:
let api:any = "http://www.jiekou.com/api"; this.http.jsonp(api,'callback').subscribe((response)=>{ console.log(response); })
- 简单分析一下json函数的参数:
- 第一个参数是你的接口地址。
- 第二个参数是回调函数
注意:有些服务器需要的callbackParam【就是callback回调函数】不一样,有些服务器叫callback,有些服务器叫cb,所以写的时候需要注意。
- 简单分析一下json函数的参数:
以上就是在angular中配置http请求了,不过多提一句,我们一般在做http请求,都会把http请求封装到一个公共的服务中,这样不管在哪里使用http请求只需要调用这个服务,传入参数即可。