Select2 Ajax 请求授权未发送

Question

尝试向需要身份验证令牌的端点发出获取请求。但每当发出请求时，它都会返回 401 错误（“需要授权标头”）。令牌是从 chrome.storage 异步检索的。但似乎没有在 ajax 请求中发送。任何帮助都值得赞赏。

ajax: {
      type: "GET",
      beforeSend: async function (request) {
        var token = await bearerToken();
        request.setRequestHeader("Authorization", token);
      },
      url: function (params) {
        return getChannelURL(params.term);
      },
      dataType: "json",
      data: function (response) {
        // data -> entire json object
        return response;
      },
      // data.data -> array containing all the channel elements
      processResults: function (data, params) {
        for (var i = 0; i < data.data.length; i++) {
          data.data[i].text = data.data[i].text || data.data[i].name;
        }
        return {
          results: data.data,
        };
      },
      cache: true,
    },
    minimumInputLength: 1,
    placeholder: "Select a Channel",
    width: "resolve",
    templateResult: formatChannelData,
  });

下面是存储token的函数

bearerToken = async () => {
    var tokenRetrieved = await helper.getLocalStorage('tokenElement')
    var token = tokenRetrieved.tokenElement
    return ("Bearer "+ token);
}

Answer 1

您的 AJAX 应该如下所示：

async function sendAJAX() {
var token = await bearerToken();
ajax: {
      type: "GET",
      beforeSend: async function (request) {
        request.setRequestHeader("Authorization", token);
      },
      url: function (params) {
        return getChannelURL(params.term);
      },
      dataType: "json",
      data: function (response) {
        // data -> entire json object
        return response;
      },
      // data.data -> array containing all the channel elements
      processResults: function (data, params) {
        for (var i = 0; i < data.data.length; i++) {
          data.data[i].text = data.data[i].text || data.data[i].name;
        }
        return {
          results: data.data,
        };
      },
      cache: true,
    },
    minimumInputLength: 1,
    placeholder: "Select a Channel",
    width: "resolve",
    templateResult: formatChannelData,
  });
}
}

该函数将等待令牌创建，然后发送 AJAX。

Answer 2

jquery.select2#ajax 和 jquery#ajax 之间存在差异。 select2#ajax不支持beforeSend和processResults。但您可以在 transport 函数中执行 ajax 请求。您的 ajax 代码应如下所示：

        ajax: {
        type: "GET",
        url: function (params) {
            return getChannelURL(params.term);
        },
        dataType: "json",
        data: function (response) {
            // data -> entire json object
            return response;
        },
        // data.data -> array containing all the channel elements
        results: function (data) {
            for (var i = 0; i < data.data.length; i++) {
                data.data[i].text = data.data[i].text || data.data[i].name;
            }
            return {
                results: data.data,
            };
        },
        transport: function(params) {
            params.beforeSend = function(request){
                var token = bearerToken();
                request.setRequestHeader('Authorization', token);
            };
            return $.ajax(params);
        },
        cache: true,
    }