Выполнение POST-запроса к API на JavaScript / jQuery

ProgramBox

Выполнение POST-запроса к API на JavaScript / jQuery

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #ajax #post #request

#javascript #jquery #ajax #Публикация #запрос

Вопрос:

Я пытался получить POST-запрос от API, и мне не очень повезло с его выполнением. Мне интересно, связано ли это с тем, что один из передаваемых мной параметров является массивом объектов. Пытался заставить это работать в течение нескольких часов, но безуспешно.

Для этой функции post требуются два параметра: userId и classId.

// вот api, который я вызываю, очевидно, не фактический URL

 let apisource = www.exampleapi.com

//это класс

 let classId = 12345;

// это ученики в классе

 let userArray = [{
  "name": "user1",
  "userId": 101
}, {
  "name": "user2",
  "userId": 102
}]

Я пишу функцию, которая принимает этот userArray и сопоставляет его с классом, содержащим идентификаторы пользователей.

Вот мой вызов API на данный момент:

 function getStudents(classId, userArray) {
  $.post(apisource)   "classes"), {
    userId: userArray.userId,
    classId: classId
  }, function(data, status) {
    console.log("students in class loaded)
  }
}

Никогда ничего не загружается. У кого-нибудь есть какие-либо предложения или указания на то, что я, возможно, делаю неправильно?

1. Использовали ли вы DevTools своего браузера, чтобы проверить, есть ли ошибка и отправлен ли запрос вообще? Это было бы важно знать

2. Запрос даже не выполняется. Я думаю, что я что-то упускаю или, возможно, я что-то неправильно написал.

3. Где вы вызываете getStudents функцию?

4. Я думаю, вам следует переместить ) after apisource в конец вашей функции

5. 1. Код содержит синтаксические ошибки 2. для запроса чего-либо из другого домена требуется URL, начинающийся с http:// 3. также требуется поддержка запросов CORS

Ответ №1:

Здесь есть несколько проблем.

Например:

 userArray.userId

Эта часть кода окончательно недействительна. Массивы имеют индексы, а не ключи, как, например, объекты. Это означает, что вы не можете получить доступ к параметру userId, поскольку вы не определили, в каком индексе он находится.

Учитывая, что ваш массив состоит из двух элементов:

 let userArray = [
  { name: 'user1', userId: 101 }, // index 0
  { name: 'user2', userId: 102 } // index 1
];

Вам потребуется получить доступ к идентификатору пользователя следующим образом:

 userArray[0].userId // Returns 101
userArray[1].userId // Returns 102

Что касается самого запроса, он может выглядеть примерно так:

 let apisource = www.exampleapi.com;
let classId = 12345;
$.ajax({  
   type: 'POST',
   url:  apisource,
   data: JSON.stringify({ userId: userArray[0].userId, classId: classId }),
   contentType: "application/json"
});

Ответ №2:

Прежде всего, вы не можете получить доступ к свойству userId userArray, вам нужно сначала выбрать объект типа «userArray[0].userId» или любую другую логику, чтобы получить один элемент.

С другой стороны, я рекомендовал вам использовать функцию fetch, которая проще в использовании, а код выглядит более чистым с promise.

 var apisource = 'https://example.com/';
var data = {}; // the user picked

fetch(apisource , {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers:{
    'Content-Type': 'application/json'
  }
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

источник: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

1. Я бы перенес ваше catch в конец, иначе это преобразует отклоненное обещание в разрешенное

2. Не совсем, я согласен с тем, что вы перемещаете catch в конец, но не по этой причине, catch будет выполняться только тогда, когда обещание действительно будет отклонено, независимо от порядка. источник: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

3. Это неверно. Если цепочка обещаний отклонена на этапе fetch() или res.json() , catch перехватит это отклонение, зарегистрирует ошибку, а затем, поскольку оно не выдает throw другой ошибки или не возвращает отклоненное обещание, ваше последнее then будет выполнено, как будто все в порядке

4. Вот небольшая демонстрация JSFiddle для вас. Попробуйте поменять catch местами до конца, и вы увидите разницу

5. о, вы правы, это действительно довольно странное поведение. Но спасибо за информацию, Филс. — приветствия.

Ответ №3:

Похоже, вам нужно реорганизовать вашу реализацию post таким образом, чтобы избежать некоторых синтаксических ошибок.

 function getStudents(classId, userArray) {
  $.post( apisource   "classes", { 
    userId: userArray.userId,
    classId: classId 
  })
  .done(function( data, status ) {
    console.log("students in class loaded")
  });
}