Fetch ошибка 500

asked Mar 25, 2016 at 18:35

Working Solution

Combining then with catch works.

fetch('http://some-site.com/api/some.json')  
  .then(function(response) {                      // first then()
      if(response.ok)
      {
        return response.text();         
      }

      throw new Error('Something went wrong.');
  })  
  .then(function(text) {                          // second then()
    console.log('Request successful', text);  
  })  
  .catch(function(error) {                        // catch
    console.log('Request failed', error);
  });

Details

fetch() returns a Promise containing a Response object. The Promise can become either fulfilled or rejected. Fulfillment runs the first then(), returns its promise, and runs the second then(). Rejection throws on the first then() and jumps to the catch().

References

MDN — Promise

MDN — Checking that the fetch was successful

Google — Introduction to Fetch

answered Mar 25, 2016 at 19:02

answered Jan 13 at 7:22

<div id="contact" class="FormBack">
	<div class="form">
	<!-- форма конечно будет отправляться за счет JS - action не
	нужен, но ставим его с заглушкой, что ВАЛИДАТОР правильно работал-->
		
	<div class="Smart"></div>
	<div class="Smart2"></div>		
		
	<form action="#" id="form" class="form_body">
			<h1 class="form_title">Отправить нам сообщение</h1>
			<div class="form_item">
					<!-- label будет привязан к formName -->
					<label for = "formName" class="form_label">Имя:</label>
					<input id="formName" type="text" name="Name" class="form_input _Req">
			</div>
			<div class="form_item">
					<label for = "formEmail" class="form_label">E-mail:</label>
					<input id="formEmail" type="text" name="Email" class="form_input _Req _Email">
			</div>
			<div class="form_item">
					<label for = "formMessage" class="form_label">Сообщение:</label>
					<textarea name="Message" id="formMessage" class="form_input _Req"></textarea>
			</div>
			<div class="form_item">
					<div class="checkbox">
							<input id="formAgree" type="checkbox" name="Agree" class="checkbox_input _Req">
							<label for = "formAgree" class="checkbox_label"><span>Я даю свое согласие на обработку моих персональных данных</span></label>
					</div>
			</div>
							<button type="submit" class="form_button"></button>
	</form>
	</div>
</div>

document.onreadystatechange = function(){
	//Перехват формы отправки после нажатия кнопки
	const form = document.getElementById('form');
	//Вешаю событие submit на эту переменную
	//и как отправив форму - переходим к formSend
	form.addEventListener('submit', formSend);
	
	async function formSend(Er)
	{
		//Запрет стандартной отправки(без заполнения)
		Er.preventDefault(); 
		//Теперь пропишем в js - что ДОЛЖНО выполняться
		//после отправки
		
		//ВАЛИДАЦИЯ
		let Error = formValidate(form);
		
		//Получаем все данные заполненных полей
		let formData = new FormData(form);
		
		//За счет AJAX(fetch) будем делать отправку данных
		if(Error === 0){
			//Как стало ясно, что ошибок нет - добавляем к форме
			//класс _sending и СООБЩАЕМ ПОЛЬЗОВАТЕЛЮ ОБ 			
			form.classList.add('_sending');
			
			//В переменную response помещаем ожидание выполнения
			//ОТПРАВКИ в файл php методом POST и данных formData
			
			let Response = await fetch('sendmail.php',{
				method: 'POST',
				body: formData				  
			});
			
			//Проверка на успешность отправки данных
			//sendmail будет возвращать JSON-ответ
			//и в случае успеха - будем получать то,
			//что в if
			if(Response.ok){
				let Result = await Response.json();
				alert(Result.Message);
				//После отправки формы - чистим ее
				form.reset();
				//Убираем высвечивание загрузки
				form.classList.remove('_sending');
			}
			else{
				alert("Ошибка");
				//Просто убираем этот класс в случае
				//ошибки, чтоб загрузка не вылезла
				form.classList.remove('_sending');
			}
			
		//Если Error не равно нулю - что выводить
		
		
	}
		else{
			alert('Заполнить обязательные поля!');
		}
}
		
		function formValidate(form){
			let Error = 0;
			//Класс req испольузем для проверки полей и добавл в html
			let formReq = document.querySelectorAll('._Req');
			//Создаем цикл, чтобы бегать по объектам, которым задали
			//класс req для проверки
			for (let index = 0; index < formReq.length; index++){
				//Объект input помещается в константу input
				const input = formReq[index];
				//Изначально перед проверкой убираем класс Error
				formRemoveError(input);
				
				//Сама проверка
				//У каждого поля будет своя проверка и потому у всех разные классы
				if(input.classList.contains('_Email')){
					//Если тест не пройден
					if (EmailTest(input)){
						formAddError(input);
						//Увеличиваем error на единицу
						Error++;
					}
				}
				//Наличие проверки checkbox
				//Проверка, что чекбокс и если бокс не включен
				else if (input.getAttribute("type") === "checkbox" && input.checked === false){
					//И вешаем на класс и его родителя ошибку
					
					formAddError(input);
					Error++;
						 
				 }
				else {
					//Если поле пустое, то
					if(input.value === ''){
						formAddError(input);
						Error++;
					}
				}
			}
			//Возвращаем значение нуля
			return Error;
		}
		
		

		
		//1 Функция для добавления объекту класса Error
		// и родительскому тоже(чтоб вместе горели красным)
		//2 функция наоборот УБИРАЕТ этот класс
		function formAddError(input){
			input.parentElement.classList.add('_Error');
			input.classList.add('_Error');
		}
		function formRemoveError(input){
			input.parentElement.classList.remove('_Error');
			input.classList.remove('_Error');
		}
		//Тест email
		function EmailTest(input){
			return !/^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/.test(input.value);
		}
		
		
	}

<?php
	//Загрузка необходимых файлов PHPMailer'а 
	use PHPMailerPHPMailerPHPMailer;
	use PHPMailerPHPMailerException;
	require 'phpmailer/src/Exception.php';
	require 'phpmailer/src/PHPMailer.php';
	
	//Объявляем PHPMailer 
	$mail = new PHPMailer(true);
	//Настройка кодировки
	$mail->CharSet = 'UTF-8';
	//Языковой файл из папки PHPMailer(ошибки поймем тоже) 
	$mail->setLanguage('ru', 'phpmailer/language/');
	//Включение html-тэгов в письме
	$mail->IsHTML(true);
	
	$mail->SMTPDebug = 2;
	
	//От кого
	$mail->setFrom('NoName@gmail.com', '');
	//Кому
	$mail->addAddress('icaab2608@gmail.com');
	//Тема
	$mail->Subject = 'Ваш сайт был кем-то замечен!';
	
	//Тело письма
	$body = '<h1>Неожиданно!Не правда ли?</h1>';
	
	//Проверки полей на пустоту (на всякий)
	if(trim(!empty($_POST['Name']))){
		$body.='<p><strong>Имя: </strong> '.$_POST['Name'].'</p>';
	}
	
	if(trim(!empty($_POST['Email']))){
		$body.='<p><strong>E-mail: </strong> '.$_POST['Email'].'</p>';
	}
	
	if(trim(!empty($_POST['Message']))){
		$body.='<p><strong>Сообщение: </strong> '.$_POST['Message'].'</p>';
	}
	
	$mail->$body;
	
	//Отправка
	//Если форма не отправилась - выводит ошибку
	if (!$mail->send()){
		$Message = 'Ошибка';
	}
	else
	{
		$Message = 'Данные отправлены';
	}
	
	//Формирование JSON для присваивания сообщения
	//что должно выводится при отправки
	//и чтоб мы получили в ответ нужное сообщение
	$Response = ['Message' => $Message];
	
	header('Content-type: application/json');
	//Возвращаем в JS с заголовком json
	echo json_encode($Response);
		
	
	error_reporting(E_ALL);
    ini_set('display_errors', 1);	
		
?>