jQuery ajax 与 finally 的承诺答案

【问题标题】：jQuery ajax promise with finallyjQuery ajax 与 finally 的承诺
【发布时间】：2022-02-26 02:47:21
【问题描述】：

我正在尝试使用 jQuery 的 ajax 功能访问 REST api。

我想要做的是返回 Promise<Customer> 对象，但我收到错误消息，即缺少属性 finally。它在过去确实有效，所以我想最近发生了一些变化。我只是不知道如何提供缺少的finally 属性。

我想一定有一个简单的解决方法，但是在网上找到任何解决方案并不容易。

失败的班级：

export class ServiceCustomer {
    public requestCustomers(): Promise<Customer> {
        const dataString: ResourceParamCustomer = {
            something: 'some entry',
            nextthing: 'other entry',
        };

        return $.ajax({
            contentType: 'application/json',
            data: JSON.stringify(dataString),
            dataType: 'json',
            type: 'POST',
            url: 'http://localhost:3000/api/customer/list',
        });;
    }
}

错误：

ERROR in [at-loader] ./src/Service/ServiceCustomer.ts:12:15 
    TS2741: Property 'finally' is missing in type 'jqXHR<any>' but required in type 'Promise<Customer>'.

package.json中的相关条目：

{
    ...
    "dependencies": {
        ...
        "@types/jquery": "3.3.31",
        ...
        "jquery": "3.4.1",
        "popper.js": "1.16.0",
        ...
    },
    "devDependencies": {
        "autoprefixer": "9.7.1",
        "awesome-typescript-loader": "5.2.1",
        "clean-webpack-plugin": "3.0.0",
        ...
        "html-webpack-plugin": "3.2.0",
        ...
        "tslint": "5.20.1",
        "typescript": "3.7.2",
        "typings-for-css-modules-loader": "1.7.0",
        ...
    },
    ...
}

tsconfig.json：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es2015",
        "jsx": "react",
    },
    "include": [
        "./src/**/*"
    ]
}

【问题讨论】：

(1) jQuery Deferreds/Promises 有一个.always() 方法，而不是.finally()。 (2).finally()没有出现在贴出的代码中。
@Roamer-1888 .always() 有点像.finally()，因为两者都执行成功和错误。有没有办法将它们连接起来，以便能够返回所发布的承诺？我将如何提供所需的finally 参数？
您正在使用 jQuery 承诺（使用 .always）或 JS 原生承诺（使用 .finally）。您可以将 jQuery 承诺转换为原生，但是 (a) 当 jQuery 传播其数据时，您必须智能地执行此操作，并且 (b) 当您已经拥有 .always 时，仅仅让 .finally 可用是不值得的.

标签： jquery typescript rest promise finally

【解决方案1】：

jQuery ajax 承诺没有 finally 方法。因此，它与 TypeScript Promise 定义不兼容。

ajax 承诺与 TypeScript PromiseLike 定义的类型兼容，因为它实现了 then 回调。但是，ajax 承诺在功能上有所不同，因为回调具有多个参数，如文档中的jQuery ajax。

jqXHR.then(
    function( data, textStatus, jqXHR ) {},
    function( jqXHR, textStatus, errorThrown ) {}
);

您可以通过创建如下所示的Promise 对象将 jQuery Promise 转换为原生 Promise。

export class ServiceCustomer {
    public requestCustomers(): Promise<Customer> {
        const dataString: ResourceParamCustomer = {
            something: 'some entry',
            nextthing: 'other entry',
        };

        return new Promise<Customer>((resolve, reject) => {
            $.ajax<Customer>({
                contentType: 'application/json',
                data: JSON.stringify(dataString),
                dataType: 'json',
                type: 'POST',
                url: 'http://localhost:3000/api/customer/list',
            }).then(
                (data, textStatus, jqXHR) => {
                    resolve(data);
                },
                (jqXHR, textStatus, errorThrown) => {
                    const error = createError(jqXHR, textStatus, errorThrown);
                    reject(error);
                }
            );
        });
    }
}

【讨论】：