用于 AJAX api 调用的 localStorage.setItem 直到函数运行后才定义

Question

Trying to figure out why localStorage.setItem in my function is not running until the end.

jquery-3.3.1.min.js:2 OPTIONS http://169.254.10.10:8080/api/v0/sessions/undefined/operations/start 404 (Not Found)

The console.log id number comes last, after trying the second api call which would make sense based on my error. I know it's hard to help test and validate but if anyone could help that would be great.

0: {apiGatewayVersion: "1.24", activeTime: "0", id: 75 }
1: {apiGatewayVersion: "1.24", activeTime: "0", id: 76 }
2: {apiGatewayVersion: "1.24", activeTime: "0", id: 77 }
3: {apiGatewayVersion: "1.24", activeTime: "0", id: 78 }
length: 4


function startSession() {
    var _url = "http://169.254.10.10:8080/api/v0/sessions"
    $.ajax({
        "url": _url,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "Content-Type": "application/json"
        },
    })
        .then(function (response) {
            var max = 0;
                for (var property in response) {
                max = (max < parseFloat(property)) ? parseFloat(property) : max;
                }
            var data = JSON.stringify(response[max]);
            var parse = JSON.parse(data);
            var id = parse.id;
            localStorage.setItem('id', id);
        console.log(localStorage.id);
});
    var _url2 = "http://169.254.10.10:8080/api/v0/sessions" + localStorage.id + "/operations/start"
    $.ajax({
        "url": _url2,
        "method": "POST",
        "timeout": 0,
        "headers": {
            "Content-Type": "application/json"
        },
});
    alert("Session Starting, Please wait...")
}

Answer 1

You cannot directly access local storage item as localStorage.id

Read manual and fix Your code:

var _url2 = "http://169.254.10.10:8080/api/v0/sessions/" + localStorage.getItem('id') + "/operations/start"

since You're using behaviour of a Promise where race condition may happen, make sure You start operations after successful getting session.

where I don't see logical reason of using local storage during operation start:

function startSession() {
    var _url = "http://169.254.10.10:8080/api/v0/sessions"
    var request = $.ajax({
        "url": _url,
        "method": "GET",
        "timeout": 0,
        "headers": {
            "Content-Type": "application/json"
        },
    });
    request.then(function (response) {
      /*
      [
        {apiGatewayVersion: "1.24", activeTime: "0", id: 75 },
        {apiGatewayVersion: "1.24", activeTime: "0", id: 76 },
        {apiGatewayVersion: "1.24", activeTime: "0", id: 77 },
        {apiGatewayVersion: "1.24", activeTime: "0", id: 78 }
      ]
      */
      // Your session list is sorted by id order, 
      // and last session is last object in array
      // it's enough to get last object from response array
      var lastSession = (Array.isArray(response) && response.length)
                        ? response[response.length-1]
                        : {id: 0};
      localStorage.setItem('id', lastSession.id);

      var _url2 = "http://169.254.10.10:8080/api/v0/sessions/" + localStorage.getItem('id') + "/operations/start";
      // or simply:
      // var _url2 = "http://169.254.10.10:8080/api/v0/sessions/" + lastSession.id + "/operations/start";
      $.ajax({
        "url": _url2,
        "method": "POST",
        "timeout": 0,
        "headers": {
            "Content-Type": "application/json"
        },
      }).then(function(response) {
        console.log(response);
      });

      alert("Session Starting, Please wait...")
    });
}

PS In case if response is object instead of array:

      /*
      {
       0: {apiGatewayVersion: "1.24", activeTime: "0", id: 75 },
       1: {apiGatewayVersion: "1.24", activeTime: "0", id: 76 },
       2: {apiGatewayVersion: "1.24", activeTime: "0", id: 77 },
       3: {apiGatewayVersion: "1.24", activeTime: "0", id: 78 }
      }
      */
      response = Object.values(response); // add this
      var lastSession = (Array.isArray(response) && response.length)
                        ? response[response.length-1]
                        : {id: 0};