Setting query string using Fetch GET request

Question

I m trying to use the new Fetch API    I am making a GET request like this   var request   new Request     url   http   myapi com orders     method   GET      fetch request     However  I m unsure how to add a query string to the GET request  Ideally  I want to be able to make a GET request to a URL like    http   myapi com orders order id 1    In jQuery I could do this by passing  order id  1  as the data parameter of   ajax    Is there an equivalent way to do that with the new Fetch API

User · Accepted Answer

Update March 2017   URL searchParams support has officially landed in Chrome 51  but other browsers still require a polyfill     The official way to work with query parameters is just to add them onto the URL  From the spec  this is an example   var url   new URL  https   geo example org api        params    lat 35 696233  long 139 570431  Object keys params  forEach key   gt  url searchParams append key  params key    fetch url  then              However  I m not sure Chrome supports the searchParams property of a URL  at the time of writing  so you might want to either use a third party library or roll-your-own solution   Update April 2018   With the use of URLSearchParams constructor you could assign a 2D array or a object and just assign that to the url search instead of looping over all keys and append them  var url   new URL  https   sl se    var params    lat 35 696233  long 139 570431     or  var params      lat    35 696233      long    139 570431     url search   new URLSearchParams params  toString     fetch url    Sidenote  URLSearchParams is also available in NodeJS  const   URL  URLSearchParams     require  url

User · Answer

You can use  stringify from query string  import   stringify   from  query-string    fetch  https   example org   stringify params

User · Answer

Maybe this is better   const withQuery   require  with-query     fetch withQuery  https   api github com search repositories       q   query     sort   stars     order   asc        then res   gt  res json     then  json    gt      console info json       catch  err    gt      console error err

User · Answer

Was just working with Nativescript s fetchModule and figured out my own solution using string manipulation  Append the query string bit by bit to the url  Here is an example where query is passed as a json object  query    order id  1     function performGetHttpRequest fetchLink  http   myapi com orders   query null        if query            fetchLink                 let count   0          const queryLength   Object keys query  length          for let key in query                fetchLink    key     query key               fetchLink     count  lt  queryLength      amp                     count                           link becomes   http   myapi com orders order id 1         Then  use fetch as in MDN and simply pass this fetchLink as the url      I tested this over a multiple number of query parameters and it worked like a charm    Hope this helps someone

User · Answer

I know this is stating the absolute obvious  but I feel it s worth adding this as an answer as it s the simplest of all  const orderId   1  fetch  http   myapi com orders order id     orderId

User · Answer

let params        param1    value1      param2    value2      let query   Object keys params                map k   gt  encodeURIComponent k          encodeURIComponent params k                  join   amp      let url    https   example com search     query   fetch url     then data   gt  data text       then  text    gt        console log  request succeeded with JSON response   text       catch function  error        console log  request failed   error

User · Answer

A concise ES6 approach  fetch  https   example com     new URLSearchParams       foo   value       bar  2       URLSearchParams s toString   function will convert the query args into a string that can be appended onto the URL  In this example  toString   is called implicitly when it gets concatenated with the URL  You will likely want to call toString   explicitly to improve readability  IE does not support URLSearchParams  or fetch   but there are polyfills available  If using node  you can add the fetch API through a package like node-fetch  URLSearchParams comes with node  and can be found as a global object since version 10  In older version you can find it at require  url   URLSearchParams

User · Answer

var paramsdate 01   s  12   s  2012   s    request get  https   www exampleurl com fromDate   paramsDate

User · Answer

Template literals are also a valid option here  and provide a few benefits   You can include raw strings  numbers  boolean values  etc       let request   new Request  https   example com  name    Patrick   amp number   1       You can include variables       let request   new Request  https   example com  name   nameParam       You can include logic and functions       let request   new Request  https   example com  name   nameParam     undefined   nameParam   getDefaultName          As far as structuring the data of a larger query string  I like using an array concatenated to a string  I find it easier to understand than some of the other methods   let queryString        param1   getParam 1        param2   getParam 2        param3   getParam 3       join   amp      let request   new Request  https   example com    queryString        method   GET

User · Answer

encodeQueryString     encode an object as querystring parameters         Encode an object as url query string parameters    - includes the leading     prefix    - example input      key   value   alpha   beta      - example output     output   key value amp alpha beta     - returns empty string when given an empty object     function encodeQueryString params        const keys   Object keys params      return keys length                 keys              map key   gt  encodeURIComponent key                          encodeURIComponent params key                 join   amp                    encodeQueryString  key   value   alpha   beta        gt    key value amp alpha beta

User · Answer

Solution without external packages to perform a GET request using the fetch api I worked on this solution that doesn t require the installation of packages  this is an example of a call to the google s map api    encode to scape spaces const esc   encodeURIComponent  const url    https   maps googleapis com maps api geocode json    const params          key   quot asdkf  laskdGE quot       address   quot evergreen avenue quot       city   quot New York quot        this line takes the params object and builds the query string const query   Object keys params  map k   gt     esc k     esc params k      join   amp    const res   await fetch url query   const googleResponse   await res json    feel free to copy this code and paste it on the console to see how it works   the generated url is something like  https   maps googleapis com maps api geocode json key asdkf C3 B1laskdGE amp address evergreen 20avenue amp city New 20York  this is what I was looking before I decided to write this  enjoy  D

User · Answer

As already answered  this is per spec not possible with the fetch-API  yet  But I have to note   If you are on node  there s the querystring package  It can stringify parse objects querystrings   var querystring   require  querystring   var data     key   value    querystring stringify data       gt   key value       then just append it to the url to request     However  the problem with the above is  that you always have to prepend a question mark      So  another way is to use the parse method from nodes url package and do it as follows   var url   require  url   var data     key   value    url format   query  data         gt    key value    See query at https   nodejs org api url html url url format urlobj  This is possible  as it does internally just this   search   obj search          obj query  amp  amp                   typeof obj query       object            querystring stringify obj query            String obj query

[javascript] Setting query string using Fetch GET request

Examples related to javascript

Examples related to jquery

Examples related to http

Examples related to fetch-api