Angular中配置http请求服务及请求跨域

在Angular中配置Http请求及请求跨域

开说之前要提一句，我这个是博客基于我用angular cli创建的项目,angular版本是8.X，如果和你手动搭建的有什么细微差别的，请自己排查一下。

---

angular的目录结构我就不多说了，我就直接讲在哪个文件，在那个模块里配置什么：

1. 在app.module.ts中引入我们http请求模块：

   // 引入angular的内置请求模块
   import {HttpClientModule} from '@angular/common/http'
   

   要使用http请求，没有这个模块，就像盖楼没地基。。。。。

2. 在app.module.ts的模块配置中，配置我们引入的http请求模块：

   // 配置模块
   imports: [
     BrowserModule,
       // 请求模块
     HttpClientModule
   ]
   

3. 配置完成后，就是使用了，如果使用了组件，那我们在组件中使用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'
   

4. 然后在我们组件的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去解决跨域问题】

1. 用jsonp解决跨域请求问题，还需要在app.module.ts中引入HttpClientJsonpModule模块

   // 如果需要用到jsonp解决跨域请求问题，还需要引入HttpClientJsonpModule
   import {HttpClientModule,HttpClientJsonpModule} from '@angular/common/http'
   

   注意：不要和上面的配置post请求时引入的模块搞混了，这两个配置所处的文件是不同的。

2. 同样，需要在app.module.ts文件的import配置模块声明一下：

   // 如果用到了JOSNP，那么也需要在模块配置中配置一下
     imports: [
       BrowserModule,
       HttpClientModule,
       HttpClientJsonpModule
     ]
   

3. 在展示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函数的参数：
     1. 第一个参数是你的接口地址。
     2. 第二个参数是回调函数

   注意：有些服务器需要的callbackParam【就是callback回调函数】不一样，有些服务器叫callback，有些服务器叫cb，所以写的时候需要注意。

---

以上就是在angular中配置http请求了，不过多提一句，我们一般在做http请求，都会把http请求封装到一个公共的服务中，这样不管在哪里使用http请求只需要调用这个服务，传入参数即可。