Как связать последовательные вызовы AJAX и передать значения между ними?

Question

У меня есть анонимная функция ajax, которая редактирует ответ на вызов success. Я хочу передать отредактированный ответ следующей функции ajax. Поскольку я хочу, чтобы обе функции ajax выполнялись последовательно, я использую .then(). Внутри моей первой функции ajax я редактирую ответ, но когда я передаю его второй функции ajax, он передается неотредактированным. Так что я предполагаю, что передаю аргументы неправильно

Вот мой отредактированный код:

EDIT

Изменен мой код в соответствии с ответом @ Квентина:

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

Избавьтесь от 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
});

Answer 3

Возвращает значение из обработчика успеха первого обещания, чтобы получить его во второй функции.

Обновленный код

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