chatGPT 使用随感-详细内容 - 黄兵的个人博客

文章内容

2023/4/28 10:44:16,作者: 黄兵

chatGPT 使用随感

最近使用 Angular 写的后台，在删除大量的数据时候出现了问题，下面是 TypeScript 编写的删除代码：

public deleteSusById(idList: number[]): Observable {
        let idListStr = '';
        const getLastElement = idList[idList.length - 1];
        for (const item of idList) {
            if (item === getLastElement) {
                idListStr += item;
            } else {
                idListStr += item + ',';
            }
        }
        return this.http.delete(`${this.requestUrl}/sus`, {
            headers: new HttpHeaders().set('Authorization', this.auth.accessToken),
            params: new HttpParams().set('id-list', idListStr)
        });
    }

由于这个项目是真实存在的，所以对以上的代码进行了一些更改，但是不影响使用。

我开始问 chatGPT：

使用 Angular HttpClient Delete 删除大量数据示例能否给一个，下面是 chatGPT 给出的结果示例：

要使用 Angular 的 HttpClient 进行批量删除，您可以使用以下示例代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private readonly baseUrl = 'https://example.com/api';

  constructor(private http: HttpClient) { }

  deleteMany(ids: number[]): Observable {
    const options = {
      params: new HttpParams().set('ids', ids.join(','))
    };
    return this.http.delete(`${this.baseUrl}/items`, options);
  }
}

代码差不多，只不过是我这边对一些服务专门加入到了一个文件，但是逻辑都是一样的。

之后 chatGPT 开始解释以上的代码：

在这个例子中，我们创建了一个名为DataService的服务，它依赖于HttpClient。我们定义了一个名为deleteMany的方法，它接受一个数字数组ids作为参数，并使用HttpClient来向API端点发送一个DELETE请求。我们使用HttpParams类来创建一个查询参数对象，其中包含一个名为ids的参数，该参数的值是一个由ids数组中的所有数字组成的逗号分隔的字符串。最后，我们将该查询参数对象作为选项传递给http.delete方法，以便将其包含在请求中。

使用该方法时，您可以像这样调用它：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
    selector: 'app-root',
    template: `
    <button (click)="deleteSelected()">Delete Selected</button>
  `
})
export class AppComponent {
    selectedIds: number[] = [1, 2, 3];

    constructor(private dataService: DataService) { }

    deleteSelected() {
        this.dataService.deleteMany(this.selectedIds).subscribe(() => {
            // handle successful deletion
        }, error => {
            // handle error
        });
    }
}

又开始解释以上代码：

在这个例子中，我们在组件中定义了一个名为selectedIds的数字数组，它包含要删除的项目的ID。当用户点击“Delete Selected”按钮时，我们调用deleteMany方法，并传递selectedIds数组作为参数。如果删除成功，我们将在subscribe回调函数中处理成功删除。如果发生错误，我们将在catch回调函数中处理错误。

之后我告诉 chatGPT 这样写存在一个问题，当数据量非常多的时候，删除会出现问题，请问怎么处理？

chatGPT 的回答是这样的：

当删除大量数据时，HTTP请求可能会变得非常大，可能会导致服务器或客户端出现问题。这可能是您面临的问题。

为了解决这个问题，一种解决方案是使用HTTP POST方法代替HTTP DELETE方法。在HTTP POST请求中，您可以将要删除的ID列表包含在请求正文中，而不是在查询字符串参数中，这样可以避免查询字符串参数过长的问题。

以下是一个简单的示例，演示如何使用HTTP POST方法删除ID列表：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IPCrawlerModel } from './ip-crawler.model';

@Injectable({
    providedIn: 'root'
})
export class CrawlerService {
    private readonly requestIPCrawler = 'https://example.com/api';

    constructor(private http: HttpClient) { }

    deleteCrawlerSuspiciousById(idList: number[]): Observable<IPCrawlerModel> {
        const headers = new HttpHeaders().set('Authorization', this.auth.accessToken);
        const payload = { ids: idList };
        return this.http.post<IPCrawlerModel>(`${this.requestIPCrawler}/suspicious/delete`, payload, { headers });
    }
}