将 Ionic 3 迁移到 Ionic 5 API

Question

您好，我有一个 Ionic 3 项目，我想迁移到 Ionic 5。我知道组件，但我遇到了不再支持的 Http 问题。

我曾经像这样调用 .ts 函数从 API 调用数据

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { AppData } from '../../providers/app-data/app-data';

 @Injectable()
 export class UserData {

options: any;
api_signature: string = '';

constructor(
    public http: Http,
    public device: Device,
    public events: Events
) {

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    this.options = new RequestOptions({
        headers: headers
    });
}

并作为

allUsers(offset: number) {
    let url = this.appData.getApiUrl() + 'allUsers';
        let data = this.jsonToURLEncoded({
            offset:offset
        });
        return this.http.post(url, data, this.options);
}

现在我像这样将 http 称为 HttpClient。但是我遇到了 RequestOptions 问题被红灯化了 ana 说找不到我知道不再支持的模块

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { AppData } from '../app-data/app-data';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class UserData {
  options: any;

 constructor(
public storage: Storage,
public appData: AppData,
public http: HttpClient,
) { 
let headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded'
});
 this.options = new RequestOptions({
  headers: headers
});

}

还有这样的功能

 allUsers(offset: number) {
    const url = this.appData.getApiUrl() + 'allUsers';
    const data = this.jsonToURLEncoded({
      offset: offset
    });
    return this.http.post(url, data, this.options);
  }

我也有 rxjs 和 map 的问题。这就是我在 .ts 中调用函数以从 api 获取数据的方式

allUsersSet() {
this.userData.allUsers(this.offset)
  .map(res => res.json())
  .subscribe(data => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

.map 被红线标记，并表示在我放置的 Observable 上不存在

import { map } from 'rxjs/operators';

但 .map 仍然是一个错误

我这样做了

allUsersSet() {
this.userData.allUsers(this.offset)
map((data: any) => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

我没有收到错误，但 api 调用未显示在 Inspect/Network/XHR 选项卡中

有什么帮助吗？

Answer 1

尝试使用 HttpHeaders 而不是 RequestOptions

import { HttpHeaders } from '@angular/common/http';

this.options = new HttpHeaders({
   'Content-Type': 'application/x-www-form-urlencoded'
});

然后像这样使用它：

return this.http.post(url, data, this.options);

您可以在此处查看有关更新版本 api 的文档：https://angular.io/guide/http

你的地图问题，需要使用管道

this.userData.allUsers(this.offset).pipe(
   map((data: any) => {
      if (data.success) {
         const temp = data.usersFeed;
         this.allUsers = temp;
      }
   })
);

可在此处查看文档：https://rxjs-dev.firebaseapp.com/guide/operators

除非您调用 .subscribe()

，否则不会调用 API

this.userData.allUsers(this.offset).pipe(map()).subscribe()

Answer 2

你也可以用这个。

import { HttpClient, HttpParams } from '@angular/common/http';

allUsers(offset: number) {
const url = this.appData.getApiUrl() + 'allUsers';

const requestOptions = {
  params: new HttpParams()
};
  const data = this.jsonToURLEncoded({
    api_signature: this.api_signature,
    offset: offset
  });
  return this.http.post(url, data, requestOptions );
}