Как передать параметры запроса в запросе GET или POST с помощью Axios

Передача параметров запроса — это метод, используемый для отправки дополнительных данных вместе с HTTP-запросом. Параметры запроса — это пары «ключ-значение», которые добавляются к URL-адресу запроса. В основном они используются с запросами GET для получения данных с сервера, но их также можно использовать с запросами POST для отправки данных вместе с телом запроса.

В этом уроке мы научимся передавать параметры запроса в запросе GET или POST при использовании Axios, очень популярной HTTP-библиотеки Javascript.
 

Передача параметров запроса в запросе GET

Синтаксис Axios для GET:

axios.get(url: string, config?: AxiosRequestConfig<any> | undefined)

Таким образом, вы можете добавить объект параметров запроса во второй аргумент, например:

const res = await axios.get('https://fake-api.codequs.com/tutorials', {
        params: {
          paramOne: 'one',
          paramTwo: 'two',
          paramThree: 'three',
          foo: 1,
          bar: 2,
        },
      });

Он выполнит запрос GET с 5 параметрами запроса:

https://fake-api.codequs.com/tutorials?paramOne=one&paramTwo=two&paramThree=three&foo=1&bar=2

Передача параметров запроса в POST-запросе

Синтаксис Axios для POST:

axios.post(
   url: string, 
   data?: {} | undefined, 
   config?: AxiosRequestConfig<{}> | undefined
)

Чтобы вы могли отправлять параметры запроса в запросе POST через третий объект аргумента, например:

const res = await axios.post(
        'https://fake-api.codequs.com/tutorials',
        {
          // data to sent to the server - post body
          // it can be an empty object
        },
        {
          // specify query parameters
          params: {
            paramOne: 'one',
            paramTwo: 'two',
            paramThree: 'three',
          },
        }
      );

Приведенный выше код опубликует пустое тело с тремя параметрами запроса:

https://fake-api.codequs.com/tutorials?paramOne=one&paramTwo=two&paramThree=three

Приятного кодирования!!!