Как мне POST данные и параметры как в Axios, используя Fetch API

Question

Возьмите следующий пример Axios:

axios.post(this.reportURL, reportData, {
  params: {
    param1: paramValue1,
    param2: paramValue2
  },
});

Как я могу сделать то же самое, используя API выборки? Я вижу, что параметры сделаны так:

fetch(this.reportURL, {
  method: "POST",
  body: "param1=paramValue1&param2=paramValue2",
  headers: 
    {
      "Content-Type": "application/x-www-form-urlencoded"
    }

})

Поскольку ключ body используется для хранения параметров, нужно ли сериализовать весь мой объект reportData и объединить его с существующими параметрами?

Я не понимаю, почему Fetch API использует ключ тела для параметров.

Кроме того, это не мой собственный API, и я не могу изменить ожидаемый запрос POST.

javascript fetch axios

0

user3379893 20 Авг 2018 в 19:35

Answer 1

К сожалению, fetch() не предоставляет «чистого» способа предоставления параметров URL строки запроса. Вы должны просто поместить их в URL, который вы получаете непосредственно. Вы можете прочитать об этом на GitHub: Как передать параметры URL-запроса? # 256.

Есть несколько способов, которыми вы можете смоделировать это:

const url = new URL("http://www.example.com");

const params = {
  foo: "bar",
  fizz: "buzz"
};

const data = {
  more: "data",
  that: "I",
  want: "to",
  send: "please"
};

Object.entries(params).forEach(([k, v]) => url.searchParams.append(k, v));
console.log(url);

fetch(url, { // URL as http://www.example.com/?foo=bar&fizz=buzz
  method: "POST",
  body: JSON.stringify(data) // The actual body
});

Поскольку в вашем вопросе также есть application/x-www-form-urlencoded, вы можете посмотреть на этот вопрос также: Опубликовать x- www-form-urlencoded запрос от React Native.

3

zero298 20 Авг 2018 в 17:10

Answer 2

Если вам нужно создать строку параметров запроса из хэша и вы используете jQuery на своем сайте, вы можете сделать:

var url = "http://www.abx.com?" + $.param({foo: "bar", baz: "kuuq"}) fetch(url)

Вот что стандарт fetch рекомендует в своей документации (см. Также обсуждение в whatwg / fetch # 56):

var url = new URL("https://geo.example.org/api"), params = {lat:35.696233, long:139.570431} Object.keys(params).forEach(key => url.searchParams.append(key, params[key])) fetch(url).then(...)

Для этого необходимо, чтобы браузер реализовал url.searchParams. Polyfill может понадобиться для старых браузеров.

Прочтите это быстро, но, надеюсь, это помогло

Источник: https://github.com/github/fetch/issues/256

0

Luca Kiebel 22 Авг 2018 в 21:29

Answer 3

Вы можете extract фрагментов из reportData в другой объект и передать его в fetch с помощью JSON.stringify.

Fetch также поддерживает FormData, но это не так сильно отличается от объектного подхода, который я уже упоминал.

В по документам вы можете указать body следующим образом:

ArrayBuffer
ArrayBufferView (Uint8Array и друзья)
Blob / файла
строка
URLSearchParams
FormData

0

Akrion 20 Авг 2018 в 16:59

Answer 4

Ты можешь сделать body: JSON.stringify ({ param1: paramValue1, param2: paramValue2 } )



        
          
            
            0
            
          
          
            Ziyo
            20 Авг 2018 в 16:50

Answer 5

Похоже, что вы близки, но во втором примере, когда вы делаете запрос POST, параметры обычно идут в теле запроса как JSON:

fetch(this.reportURL, {
  method: "POST",
  body: JSON.stringify({
    param1: paramValue1,
    param2: paramValue2
  })    
})

0

Vitor M. Barbosa 20 Авг 2018 в 16:54

Как мне POST данные и параметры как в Axios, используя Fetch API

5 ответов

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript