Angular Rxjs异步请求和http请求

￡神魔★判官ぃ 2023-06-13 06:05 20阅读 0赞

# #

## 一、异步请求 ##

异步请求有三种方式：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，封装出一个异步网络请求服务 ##

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