javascript - 具有不同参数的可重用 Ajax 调用

Question

我正在开发一些软件，可以对 Web API 进行 ajax 调用并返回一些数据。完成大部分工作后，我将回过头看看是否可以重构任何代码。由此我意识到，我进行了多个 ajax 调用，除了传递给它们的参数之外，这些调用具有相同的功能。考虑到这一点，我想将 ajax 调用重构为可重用的函数或组件，然后我可以为每个调用传递不同的参数，从而显着减少代码量。这是我创建的 ajax 调用:

function AjaxCall (ajaxUrl, ajaxData){
        return $.ajax({
            type: "GET",
            url: ajaxUrl,
            data: {
                ajaxData: ajaxData
            },
            dataType: 'JSON'
        });
    }

后来在我的代码中我调用了这个函数......

var brandId = $('#brandDropdownList option:selected').prop('id');
var ProductUrl = "http://localhost:54442/api/products/GetProducts";

var getProducts =  AjaxCall(ProductUrl, brandId);

getProducts.done(function(data) {
            $('#productDropdownList').html('').append('<option id="-1" disabled selected="selected">Please Select a Product...</option>');
            $.each(data, function(key, val) {
                $('#productDropdownList').append('<option id="' + val.productId + '">' + val.productName + '</option>');
            })
        })

在此，我从 UI 获取字段的 ID，并将其存储在名为 BrandId 的变量中。然后我设置要使用的 ajax 调用的 URL。然后，我调用函数 AjaxCall，传入 ProductUrl 和 BrandId。 getProduct.done 是成功的，我将数据附加到下拉列表中，但这与问题的上下文相关。

基本上我的问题是，在可重用组件中我使用了ajaxData，我需要ajaxCall来使用传入的参数brandId。所以我想要的实际 ajax 调用是

function AjaxCall (ajaxUrl, brandId){
        return $.ajax({
            type: "GET",
            url: ajaxUrl,
            data: {
                brandId: brandId
            },
            dataType: 'JSON'
        });

这会导致对以下 URL“http://localhost:54442/api/products/GetProducts?brandId=1”的请求，这正是我想要的。但每次我想要进行 ajax 调用时，变量brandId 都会更改为例如productId。那么有没有一种方法可以进行可重用的 ajax 调用，我可以传递不同的变量(brandId、ProductId 等)，但也可以将 ajax 调用的数据部分中的变量更改为传入的变量，否则会产生结果网址如下:“http://localhost:54442/api/products/GetProducts?ajaxData=1”。

希望这是有道理的。提前致谢

Answer 1

在函数中，传递给 $.ajax() 的 data: 属性应为 ajaxData:

function ajaxCall (ajaxUrl, ajaxData){
    return $.ajax({
        type: "GET",
        url: ajaxUrl,
        data: ajaxData,
        dataType: 'JSON'
    });
}

然后，当您调用它时，您可以传递带有您想要的任何参数的对象:

let promise = ajaxCall(someUrl, { brandId: brandId });