Переменные, константы в С++ и операции с ними: 2-я часть гайда по языку программирования
Разбираемся, как работать с данными в программе на C++. Будет много теории и примеров, чтобы вы углубились в язык ещё больше.
Евгений Кучерявый
Пишет о программировании, в свободное время создаёт игры. Мечтает открыть свою студию и выпускать ламповые RPG.
Это вторая часть из серии «Глубокое погружение в C++». В прошлый раз мы разобрались, что такое программа и из чего она состоит, а сейчас узнаем азы работы с данными.
Что такое данные и как они хранятся в программах
Все программы работают с данными. Данные — это любые значения, которые используются в работе программы: строки, числа, ссылки и символы. Например: имя, возраст, количество денег на счету, здоровье персонажа в игре и так далее. Даже отсутствие данных — это данные.
Все эти и другие значения хранятся в оперативной памяти. Для каждого значения выделяется отдельная ячейка, и одновременно в ней может находиться только что-то одно.
Давайте рассмотрим это на примере коробок:
Мы говорим компьютеру, что нам нужна коробка x, которая будет хранить целые числа, но пока не помещаем в неё никакого значения. Компьютер создаёт такую коробку, подписывает её и помещает в неё null.
Далее мы пишем команду x = 5;, и компьютер меняет значение внутри коробки. Размер коробки при этом не меняется. Так получается, потому что для хранения каждого примитивного типа данных выделяется определённое количество памяти. Например, для целых чисел это четыре байта, что позволяет хранить значения в диапазоне от −2 147 483 648 до 2 147 483 647.
Коробки, описанные выше, в программировании называются переменными (англ. variable). Их значение можно менять во время работы программы. Также существуют коробки, которые менять нельзя, — их называют константами.
То, какие данные сейчас хранятся в памяти, называется состоянием. Состояние может быть у программы, системы, компьютера и так далее. В C++ очень важно иметь доступ к состоянию, чтобы писать полезные программы.
Переменные в C++
Теперь попробуем создать свои переменные.
Для начала объявим переменную, то есть скажем компьютеру, что нам нужно занять место в памяти. Для этого укажем тип данных, а потом название переменной.
| Код | Как читается |
|---|---|
| int x; | Объявить целочисленную переменную x без значения. |
Так создаётся переменная без значения. Если вы хотите, чтобы в ней сразу было какое-то число, то нужно использовать знак присваивания (=):
| Код | Как читается |
|---|---|
| int y = 5; | Объявить целочисленную переменную y со значением 5. |
Теперь в любое время можно менять значения переменных:
| Код | Как читается |
|---|---|
| x = 6; | Присвоить переменной x значение 6. |
Математический знак равенства (=) в программировании называется знаком присваивания.
Важно! Указывать тип данных нужно только при объявлении переменной.
Давайте попробуем вывести значение какой-нибудь переменной на экран. Для этого напишем следующий код:
Попробуйте изменить значение переменной age на любое другое число и посмотрите, как изменится вывод.
Допустимые имена для переменных
Идентификаторы переменных могут содержать в себе:
- латинские буквы;
- цифры;
- знак нижнего подчёркивания.
При этом название не может начинаться с цифр. Примеры названий:
Все идентификаторы регистрозависимы. Это значит, что name и Name — разные переменные.
Рекомендуется давать именам простые названия на английском языке, чтобы код был понятен и вам, и другим людям. Например:
Если название должно состоять из нескольких слов, то рекомендуется использовать camelCase (с англ. «верблюжий регистр»): первое слово пишется со строчной буквы, а каждое последующее — с заглавной.
Типы данных в программировании
Чаще всего используются следующие типы данных:
Эти типы данных называются примитивными (значимыми), потому что они базово встроены в язык.
Также существуют ссылочные типы — такие переменные хранят в себе не само значение, а ссылку на него в оперативной памяти. К ссылочным типам относятся массивы, объекты, строки (так называют любой текст) и многое другое. Для строк используется тип std: string.
Вот несколько примеров переменных разных типов:
//Строки записываются внутри двойных кавычек std::string name = "Evgenii Kucheriavyi"; int age = 21; //Символы записываются внутри одинарных кавычек //Тип char вмещает в себя только один символ char firstNameInitial = 'E'; char lastNameInitial = 'K'; //Дробная часть числа записывается после точки //После самого числа должна стоять буква F float x = 5.4F; float y = 7.3F; //Для типа double буква F не нужна double discount = 0.4; bool isHungry = true; //Истина bool hasFood = false; //Ложь
Комментарии в C++
В коде выше русский текст после двойных слэшей (//) — это комментарии. Они позволяют разработчикам делать заметки, объяснять код так, чтобы все могли в нём ориентироваться. Компилятор игнорирует комментарии, поэтому они никак не влияют на работу программы.
Есть два типа комментариев:
- Однострочные— их вы видели в примере выше. Всё, что находится после двойных слэшей и до конца строки — комментарий.
- Многострочные— для них используются символы /* (начало комментария) и */ (конец комментария).
Попробуйте написать в коде и те, и другие комментарии, чтобы понять, как они работают.
Константы в C++
Чтобы создать константу, используйте ключевое слово const:
const double Pi = 3.14; const double g = 9.8;
Константы обычно нужны, чтобы хранить какие-то постоянные величины из физики, математики или геометрии: число пи, ускорение свободного падения, скорость света и так далее. Однако вы можете хранить в них и другие значения, которые должны оставаться постоянными:
- частоту обновления экрана (например, 60 кадров в секунду);
- ваш год рождения;
- имя персонажа в игре и так далее.
Математические операции в C++
В С++ есть пять базовых математических операций:
- Сложение (+).
- Вычитание (-).
- Умножение (*).
- Деление (/).
- Остаток от деления (%).
Используются они следующим образом:
int a = 2 + 2; //4 int b = 6 - 3; //3 //В вычислениях можно использовать переменные и константы int c = 11 - b; //8 int d = 12 / 6; //2 //Так как int может содержать в себе только целые числа, остаток от деления будет отброшен int e = 13 / 5; //2 int f = 13 % 5; //3 //Чтобы получить более точный результат деления, нужно использовать дробные числа double g = 13.0 / 5; //2.6 //При делении целых чисел даже в типах double или float результатом деления будет целое число, без остатка double j = 13 / 5; //2 int h = 5 * 5; //25 //Вы можете использовать скобки, чтобы определить порядок действий int k = 5 + 2 * 2; //9 int l = (5 + 2) * 2; //14 //Можно использовать отрицательные числа int m = 2 + -2; //0
Важно! Сначала выполняется правая часть выражения после знака =, а потом левая. То есть переменной не будет присвоено значения, пока не выполнены все вычисления. Поэтому можно записать в переменную результат вычислений, в которых использовалась эта же переменная:
int x = 2; x = x + 5; //7
Если вам нужно провести какую-то операцию с переменной, а потом записать значение в неё же, используйте следующие операторы:
x += 5; //x = x + 5; x -= 7; //x = x - 7; x *= 2; //x = x * 2; x /= 3; //x = x / 3; x %= 8; //x = x % 8;
Во время работы с С++ вы будете часто прибавлять или отнимать единицу от какой-нибудь переменной. Для этого тоже есть сокращённая запись:
//Инкремент (увеличение переменной) x++; //x = x + 1; //Декремент (уменьшение переменной) x--; //x = x - 1;
Инкремент и декремент могут быть префиксными (++x) и постфиксными (x++). Префиксный инкремент сначала прибавляет к переменной единицу, а потом использует эту переменную, а постфиксный — наоборот.
int x = 5; //Сначала к x будет прибавлена единица, и только потом он будет использован в выражении int y = ++x + 2; //8 //Сначала x будет использован в выражении, и только потом к нему будет прибавлена единица int z = x++ + 2; //7
Заключение
Единственный способ разобраться, как это всё работает, — практиковаться. Придумайте программы, которые могли бы использовать переменные:
- калькулятор для уравнений;
- определитель размера скидки или комиссии;
- вывод суммы характеристик персонажа и так далее.
Напишите как можно больше программ, и тогда вы сможете лучше усвоить материал. В следующей статье мы поговорим о ветвлении и условных конструкциях.
Читайте также:
- Объектно-ориентированное программирование. Часть 1. Что такое классы и объекты
- Нетоксичный чат для джунов: прокачать скиллы, найти ментора и первую работу
- C++ в 2k21: где используется, какие перспективы, что надо знать для старта
Возвращаемые значения функций
Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS, JavaScript first steps, Functions — reusable blocks of code. |
|---|---|
| Цели: | Понять что такое возвращаемое значение функции и как его использовать. |
Что из себя представляют возвращаемые значения?
Возвращаемые значения — это на самом деле просто значения, которые функция возвращает после своего завершения. Вы уже неоднократно встречали возвращаемые значения, хотя, возможно, и не осознавали этого. Напишем небольшой код:
var myText = "I am a string"; var newString = myText.replace("string", "sausage"); console.log(newString); // функция replace() принимает строку, // заменяет одну подстроку другой и возвращает // новую строку со сделанными заменами
Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() на строке myText и передаём ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной newString .
Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value. Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.
Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в функции displayMessage() которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.
В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.
Использование возвращаемых значений в ваших собственных функциях
Чтобы вернуть значение своей функции, вы должны использовать ключевое слово return. Мы видели это в действии недавно — в нашем примере random-canvas-circles.html. Наша функция draw() отрисовывает где-то на экране 100 случайных кружков.
function draw() ctx.clearRect(0, 0, WIDTH, HEIGHT); for (var i = 0; i 100; i++) ctx.beginPath(); ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ctx.fill(); > >
Внутри каждой итерации есть 3 вызова функции random() . Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция random() принимает 1 параметр (целое число) и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так:
function random(number) return Math.floor(Math.random() * number); >
Тоже самое может быть написано вот так:
function random(number) var result = Math.floor(Math.random() * number); return result; >
Но первую версию написать быстрее и она более компактна.
Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:
.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:
.arc(500, 200, 35, 0, 2 * Math.PI);
Сначала выполняются вызовы функции random() , на место которых подставляются возвращаемые ей значения, а затем выполнятся сама строка.
Активное обучение: наша собственная, возвращающая значение функция
Теперь напишем нашу собственную возвращающую значение функцию.
function squared(num) return num * num; > function cubed(num) return num * num * num; > function factorial(num) var x = num; while (x > 1) num *= x - 1; x--; > return num; >
.onchange = function () var num = input.value; if (isNaN(num)) para.textContent = "You need to enter a number!"; > else para.textContent = num + " squared is " + squared(num) + ". " + num + " cubed is " + cubed(num) + ". " + num + " factorial is " + factorial(num) + "."; > >;
Примечание: Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией finished version on GitHub (или смотрите живой пример), или спросите нас.
К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num ?
Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово return . В дополнение:
- Приведите другой пример написание обработчика ошибок. Это довольно хорошая идея проверять что важные параметры предоставлены в правильном типе и если они опциональны то предусматривать для них значения по умолчанию. В таком случая ваша программа с меньшей вероятность подвержена ошибкам.
- Поразмышляйте о идее создания библиотеки функций. Чем дальше вы будите расти в профессиональном плане, тем больше будете сталкиваться с однотипными вещами. Это хорошая идея начать собирать свою собственную библиотеку функций, которые вы часто используют — в таком случае вы сможете просто скопировать их в ваш новый код или просто добавить их в любую HTML страничку, где это требуется.
Заключение
Функции очень полезны и несмотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.
Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или свяжитесь с нами для получения помощи.
Смотрите также
- Функции более подробно — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
- Колбэк-функции в JavaScript — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
- Назад
- Обзор: Building blocks
- Далее
In this module
- Making decisions in your code — conditionals
- Looping code
- Functions — reusable blocks of code
- Build your own function
- Function return values
- Introduction to events
- Image gallery
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
§ 14. Язык программирования Паскаль
Желание упростить и ускорить всевозможные расчеты присуще человеку с древних времен. Создавая различные приспособления для счета, человек прошел долгий путь. Сегодняшний компьютер способен выполнять сотни миллионов операций в секунду. Для решения вычислительных задач требуется сначала составить алгоритм их решения, а затем записать его в виде программы, используя какой-либо язык программирования.
Язык программирования устанавливает набор правил, определяющих внешний вид программы и действия, которые выполнит исполнитель под ее управлением.
Язык программирования Паскаль ( Pascal ) используется для обучения программированию и является базой для ряда профессиональных языков программирования.
Существует большое количество сред программирования, поддерживающих язык Паскаль: PascalABC , FreePascal, Delphi, GNU Pascal, Dev — Pascal , Rad Studio и др. В учебном курсе используется среда PascalABC (с ней вы работали, знакомясь с учебными компьютерными исполнителями).
14.1.Команда вывода
Демонстрировать работу любой программы имеет смысл только тогда, когда она выводит какую-либо информацию.
Программа на языке Pascal (тело программы) должна начинаться со слова begin , а заканчиваться словом end и точкой. Программа, состоящая из этих команд, разделенных пробелом или переводом строки, может быть запущена на выполнение, но она ничего не делает. Добавим в нее команду вывода приветствия:
Результат работы программы отражается в нижней части окна программы PascalABC в окне вывода (пример 14.1).
Команда write ( ) ; предназначена для вывода данных.
Текст, который нужно вывести на экран, заключают в апострофы (одинарные кавычки). Этот текст не анализируется и выводится на экран в том виде, в котором он записан. Текст можно записать как на русском, так и на любом другом языке. Текстом может быть произвольный набор символов.
В программе может быть несколько команд вывода. Если необходимо вывести текст, записанный в несколько строк, то используют команду writeln ( ). Буквосочетание « ln » (сокращение от англ. line — линия, строка), записанное в конце команды, означает, что после вывода нужно перевести курсор в новую строку.
Пример 14.2. Выведем на экран компьютера следующий текст: « Привет! Я компьютер. Я умею выполнять программы! Сегодня ты написал свою первую программу, а я ее выполнил. Сейчас на экране – результат этой программы ».
Используя сочетание команд write и writeln , текст можно расположить по-разному.
Как вы уже знаете, текст в команде write ( ), записанный в кавычках, не анализируется. Если кавычки опустить, то производится анализ тех данных, которые записаны в скобках. Например, если в скобках написать арифметическое выражение, то сначала вычисляется его значение, а затем выводится результат.
Пример 14.3. Посчитаем значение выражения 2 + 2 ∙ 2.
Если записать выражение в кавычках, то будет выведено само выражение. При отсутствии кавычек на экран будет выведено значение данного выражения.
14.2. Понятие типа данных
На практике редко приходится писать программы, которые решают только одну задачу. Обычно программы пишутся для решения целого класса задач, которые можно сформулировать в общем виде.
С такими задачами вы уже сталкивались в курсе математики. Например, решение задачи «Найдите площадь прямоугольника» можно записать так: S = a ∙ b , где переменные a и b обозначают соответственно длину и ширину прямоугольника, а S — площадь. Зная эту формулу, можно найти площадь любого прямоугольника.
В программировании для решения задач в общем виде также используют переменные. Поскольку с такими переменными будет работать компьютер, то они должны храниться в его памяти.
Информацию, представленную в пригодном для обработки на компьютере виде, называют данными.
Переменная в программировании — это именованная ячейка памяти, хранящая значение переменной.
Компьютер может обрабатывать данные разных типов: целые и действительные числа, символы, тексты и др.
Тип данных определяет способ хранения данных в памяти компьютера, диапазон возможных значений данных и операции, которые с этим типом данных можно выполнять.
Для того чтобы использовать какую-либо переменную, ее необходимо описать. Описание переменных выполняется до начала программы (команды begin ) (пример 14.4). При описании переменной выделяется память для хранения значения этой переменной. В процессе выполнения программы значение переменной может изменяться.
Для описания переменных используется команда var (сокращение от англ. variable — переменная).
Формат записи команды следующий:
Для обозначения имени переменной используются буквы латинского алфавита, цифры и знак «_». Первым символом должна быть буква или знак подчеркивания.
Тип данных real в языке программирования Pascal позволяет работать с числами и выполнять над ними арифметические действия: сложение, вычитание, умножение и деление.
14.3. Оператор присваивания
Одной из основных команд для обработки данных в программе является оператор присваивания.
Оператор присваивания предназначен для того, чтобы:
- задавать значения переменным;
- вычислять значения арифметического выражения (результат вычисления будет записан как значение переменной).
Формат записи оператора присваивания:
В записи арифметического выражения используются знаки математических действий — сложения, вычитания, умножения, деления:
Запись в Pascal
Приоритет выполнения операций соответствует принятому в математике: сначала выполняются умножение и деление, а затем сложение и вычитание. Для изменения порядка действий в выражениях можно использовать скобки.
Для записи обыкновенной дроби используется знак деления. Знак умножения опускать нельзя. Целая часть дробного числа отделяется от дробной части точкой.
14.4. Ввод данных
Начальные значения переменным можно задавать не только с помощью оператора присваивания, но и путем ввода с клавиатуры. В этом случае, если необходимы вычисления с новым набором значений исходных данных, текст программы не нужно изменять.
Команда read ( ) предназначена для ввода данных. В скобках через запятую перечисляются имена переменных, значения которых необходимо ввести.
Ввод данных происходит в нижней части окна программы PascalABC . Для этого используется окно «Ввод данных». После нажатия кнопки «Ввести» или клавиши « Enter » введенные значения переносятся в окно вывода. После завершения работы программы в этом же окне будет выведен результат (пример 14.8).
14.5. Структура программы
Все программы на языке программирования Pascal имеют общую структуру.
В программе можно выделить следующие разделы:
- заголовок программы (является необязательным);
- подключаемые библиотеки (модули) (если подключать дополнительные библиотеки не нужно, раздел отсутствует; известные библиотеки: Drawman, Robot, RobTasks );
- описание переменных с указанием их типа;
- описание вспомогательных алгоритмов (если использовать вспомогательные алгоритмы не нужно, раздел отсутствует);
- begin … end. — служебные слова, обрамляющие тело основной программы, в которой находятся исполняемые команды. Слово begin начинает исполняемую часть программы, а end . (точка в конце обязательна) ее завершает.
Таким образом, в минимально возможном наборе программа состоит только из пустого тела программы: begin end . Программа, содержащая все разделы, представлена в примере 14.9.
Для каждого раздела определено ключевое служебное слово, которым начинается данный раздел программы. При написании программы ключевые слова выделяются полужирным шрифтом.
Электронно-вычислительная машина (ЭВМ) — комплекс технических средств, где основные функциональные элементы (логические, запоминающие, индикационные и др.) выполнены на электронных приборах, предназначенных для автоматической обработки информации в процессе решения вычислительных задач.
Никлаус Вирт (род. в 1934 г.) — швейцарский ученый, специалист по информатике, один из известнейших теоретиков в области разработки языков программирования, профессор компьютерных наук. Создатель и ведущий проектировщик языков программирования Паскаль, Модула-2, Оберон.
По традиции, начавшейся в 1978 г. с примера из книги Брайана Кернигана и Денниса Ритчи «Язык программирования Си», первая программа на любом языке программирования должна выводить на экран приветствие миру:
Окно среды PascalABC с результатом работы программы:
Пример 14.2. Текст программы:
fetch ( )
С помощью функции fetch ( ) можно отправлять сетевые запросы на сервер — как получать, так и отправлять данные. Метод возвращает промис с объектом ответа, где находится дополнительная информация (статус ответа, заголовки) и ответ на запрос.
Как понять
Скопировать ссылку «Как понять» Скопировано
Браузер предоставляет глобальный API для работы с запросами и ответами HTTP. Раньше для подобной работы использовался XMLHttpRequest, однако fetch ( ) более гибкая и мощная альтернатива, он понятнее и проще в использовании из-за того, что использует Promise .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Функция fetch ( ) принимает два параметра:
- url — адрес, по которому нужно сделать запрос;
- options (необязательный) — объект конфигурации, в котором можно настроить метод запроса, тело запроса, заголовки и многое другое.
По умолчанию вызов fetch ( ) делает GET-запрос по указанному адресу. Базовый вызов для получения данных можно записать таким образом:
fetch('http://jsonplaceholder.typicode.com/posts')fetch('http://jsonplaceholder.typicode.com/posts')
Результатом вызова fetch ( ) будет Promise , в котором будет содержаться специальный объект ответа Response . У этого объекта есть два важных для нас поля:
- ok — принимает состояние true или false и сообщает об успешности запроса;
- json — метод, вызов которого, возвращает результат запроса в виде json.
В следующем примере используем .then ( ) — обработчик результата, полученного от асинхронной операции. Обработчик дождётся ответа от сервера, принимает ответ, и, в данном случае, неявно возвратит ответ, обработанный методом .json();
fetch('http://jsonplaceholder.typicode.com/posts') // функция then вернет другой промис (их можно чейнить). Когда отрезолвится промис (r.json()), который вернула функция then, будет вызван следующий колбек в цепочке .then((response) => response.json()) // Получим ответ в виде массива из объектов [, , , . ]fetch('http://jsonplaceholder.typicode.com/posts') // функция then вернет другой промис (их можно чейнить). Когда отрезолвится промис (r.json()), который вернула функция then, будет вызван следующий колбек в цепочке .then((response) => response.json()) // Получим ответ в виде массива из объектов [, , , . ]
С помощью второго аргумента options можно передать настройки запроса. Например, можно изменить метод и добавить тело запроса, если мы хотим не получать, а отправлять данные. Так же в запрос можно добавить заголовки в виде объекта или специального класса Headers .
const newPost = title: 'foo', body: 'bar', userId: 1,> fetch('https://jsonplaceholder.typicode.com/posts', method: 'POST', // Здесь так же могут быть GET, PUT, DELETE body: JSON.stringify(newPost), // Тело запроса в JSON-формате headers: // Добавляем необходимые заголовки 'Content-type': 'application/json; charset=UTF-8', >,>) .then((response) => response.json()) .then((data) => console.log(data) // >)const newPost = title: 'foo', body: 'bar', userId: 1, > fetch('https://jsonplaceholder.typicode.com/posts', method: 'POST', // Здесь так же могут быть GET, PUT, DELETE body: JSON.stringify(newPost), // Тело запроса в JSON-формате headers: // Добавляем необходимые заголовки 'Content-type': 'application/json; charset=UTF-8', >, >) .then((response) => response.json()) .then((data) => console.log(data) // >)
Cookies
Скопировать ссылку «Cookies» Скопировано
По умолчанию fetch ( ) запросы не включают в себя cookies и потому авторизованные запросы на сервере могут не пройти. Для этого необходимо добавить в настройку поле credentials :
fetch('https://somesite.com/admin', method: 'GET', // или 'same-origin' если можно делать такие запросы только в пределах этого домена credentials: 'include',>)fetch('https://somesite.com/admin', method: 'GET', // или 'same-origin' если можно делать такие запросы только в пределах этого домена credentials: 'include', >)
Обработка ошибок
Скопировать ссылку «Обработка ошибок» Скопировано
Любой ответ на запрос через fetch ( ) (например HTTP-код 400, 404 или 500) переводит Promise в состояние fulfilled. Промис перейдёт в состояние rejected только если запрос не случился из-за сбоя сети или что-то помешало выполнению fetch ( ) .
// Запрос вернет ошибку 404 Not Foundfetch('https://jsonplaceholder.typicode.com/there-is-no-such-route').catch( () => console.log('Error occurred!') >) // Никогда не выполнится// Запрос вернет ошибку 404 Not Found fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route').catch( () => console.log('Error occurred!') > ) // Никогда не выполнится
Чтобы обработать ошибку запроса, необходимо обращать внимание на поле ok в объекте ответа Response . В случае ошибки запроса оно будет равно false .
fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route') .then((response) => // Проверяем успешность запроса и выкидываем ошибку if (!response.ok) throw new Error('Error occurred!') > return response.json() >) // Теперь попадём сюда, т.к выбросили ошибку .catch((err) => console.log(err) >) // Error: Error occurred!fetch('https://jsonplaceholder.typicode.com/there-is-no-such-route') .then((response) => // Проверяем успешность запроса и выкидываем ошибку if (!response.ok) throw new Error('Error occurred!') > return response.json() >) // Теперь попадём сюда, т.к выбросили ошибку .catch((err) => console.log(err) >) // Error: Error occurred!
На практике
Скопировать ссылку «На практике» Скопировано
Егор Огарков советует
Скопировать ссылку «Егор Огарков советует» Скопировано