Angular Rxjs异步请求和http请求

 

 

一、异步请求

异步请求有三种方式：1. 回调函数获取异步数据  2.Promis获取异步数据  3. Rxjs获取异步数据

1.1 回调函数获取异步数据

通过函数传递，并在回调函数中调用这个函数的方式实现回调，但逻辑结构不够清晰，整个过程无法对他进行额外操作，且容易造成回调地狱。

request.service.ts

// 用callback方式
  getCallbackData(cb) {
    setTimeout(() => {
        var username = "张三";
        cb(username);
    },1000);
  }

外部调用：

// callback获取异步数据
this.request.getCallbackData((data) => {
  console.log("callback = " + data);
});

 

1.2 Promise获取异步数据

通过ES6提供的Promis获取异步数据，可以做阻塞等多种操作。若成功则调用resolve返回，失败调用reject返回

request.service.ts

 // 用Promise处理异步
  getPromisData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        var username = "李四";
        resolve(username);
      },3000);
    })
  }

外部调用：

// Promise获取异步数据
var promiseData = this.request.getPromisData();
promiseData.then((data) => {
  console.log("promise = " + data);
})

 

1.3 Rxjs获取异步数据

Rxjs用法与Promise类似，但关键词不同。Promise中是用resolve、reject、then关键字， Rxjs是用new Observable、next、subscribe来定义的。同时，Rxjs还提供过滤器和匹配功能，可以过滤和修改返回的数据。

request.service.ts

 getRxjsIntervalNum() {
    let count = 0;
    return new Observable<any>((observable) => {
      setInterval(() => {
        count++;
        observable.next(count);
      },1000)
    })
  }

外部调用：

// Rxjs 使用用具方法对返回的数据进行处理
    // filter: 过滤数据
    // map: 处理数据
    var rxjsData4 = this.request.getRxjsIntervalNum();
    rxjsData4.pipe (
      filter((value) => {
        // 只显示偶数的数据了
        if(value%2==0) {
          return true;
        }
      }),
      map((value) => {
        return value*value;
      })
    )
    .subscribe((data) => {
      console.log("rxjs filter map = " + data);
    })
  }

 

二、两种http请求方式

2.1  使用Angular提供的HttpClientModule模块请求

app.module.ts

// 引入HttpClientModule服务
import { HttpClientModule } from '@angular/common/http'

http.service.ts

// 先引入模块组件
import { HttpClient,HttpHeaders } from '@angular/common/http'

外部使用：

get请求

 getData() {
    let api = 'http://a.itying.com/api/productlist';
    // 已经结合了rxjs
    this.http.get(api).subscribe((response:any) => {
      // 自动将服务器的响应数据转换成对象
      console.log(response);
      this.list = response.result;
    });
  }

post请求

doLogin() {
    // 手动设置请求类型
    const httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/json'})};
    var api = "http://127.0.0.1:3000/dologin";
    var data =  {
      "username" : "张三",
      "age": 20
    }
    this.http.post(api, data, httpOptions).subscribe((response:any) => {
      console.log(response);
    })
  }

 

2.2 使用axios请求

2.1.1 先现在axios

npm install axios --save

2.2.2 使用axios

axiosHttp.service.ts

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';

import axios from 'axios';

@Injectable({
  providedIn: 'root'
})
export class AxiosHttpService {

  constructor() { }

  axiosGet(api) {
    
    return new Observable((observe) => {
      axios.get(api)
      .then(function (response) {
        console.log(response);
        observe.next(response);
      })
      // 失败
      .catch(function (error) {
        observe.next(error);
      })

    })
   
  }
}

外部使用：

axiosGet(api) {
    
    return new Observable((observe) => {
      axios.get(api)
      .then(function (response) {
        console.log(response);
        observe.next(response);
      })
      // 失败
      .catch(function (error) {
        observe.next(error);
      })

    })
   
  }

 

三、axios结合rxjs，封装出一个异步网络请求服务

四、跨域问题的几种解决方式