Question

我具有匿名ajax函数，该函数可编辑success调用中的响应。我想将编辑后的响应传递给下一个ajax函数。由于我希望两个ajax函数都可以连续执行，因此我使用.then()。在第一个ajax函数中，我编辑了响应，但是当我将其传递给第二个ajax函数时，它未经编辑就传递了。所以我想我以错误的方式传递了论点。

这是我编辑的代码：

编辑

按照@Quentin的答案修改了我的代码：

document.getElementById("myBtn").addEventListener("click", function (e) {
  e.preventDefault();
  var first_request = $.ajax({
    url: 'www.random.com',
    method: 'GET',
  });
  var modified_response = first_request.then(
    function (response) {
      response = response.replace('random', 'SemiRandom');
      return response;  
     });
//here it complains that data is not defined
      modified_response.then(function (data) {
        return $.ajax({
          url: data,
          method: 'GET',
          crossDomain: true,
          xhrFields: {
            withCredentials: false
          },
          success: function(){
            alert(data);}
      })
      });
    });

Answer 1

不要混用回调和承诺。选一个。最好保证。

const first_request = 
    $.ajax("https://cors-anywhere.herokuapp.com/http://example.com/");

const modified_response = 
    first_request.then(
        response => response.replace('random', 'semiRandom')
    );

const second_request = 
    modified_response.then(data => $.ajax(data));

const second_response = 
    second_request.then(data => console.log(data));

Answer 2

从第一个承诺成功处理程序返回值，以在第二个函数中获取它。

更新的代码

function secondAjax(response){
    $.ajax({
    //here response is still `www.randomURL.com` when I want it to be `www.semiRandomURL.com`
    url: response,
    method: 'GET',
    success: function(response) {
     //do something
    }
  });
}

document.getElementById("div1").addEventListener("click", function (e) {
  e.preventDefault();
  $.ajax({
    url: 'www.randomURL.com',
    method: 'GET',
    crossDomain : true,
    xhrFields: {
      withCredentials: false
    },
    success: function(response){
      return secondAjax(response.replace('random', 'semiRandom'));
    }
  });
  }

详细了解承诺链-https://javascript.info/promise-chaining

Answer 3

摆脱success并将响应参数添加到then()。

您还可以使用$.get()速记方法来简化操作，因为您似乎正在使用的选项都是除crossDomain以外的所有默认值，除了测试jsonp请求外，$.get('www.randomURL.com').then(function(url) { url = url.replace('random', 'semiRandom'); return $.get(url); }).then(function(results) { // do something with results });并没有实际意义

{{1}}

如何链接连续的AJAX调用并在它们之间传递值？

3 个答案: