Đặt chuỗi truy vấn bằng yêu cầu Fetch GET

Tôi đang cố gắng sử dụng API tìm nạp mới :

Tôi đang thực hiện một GETyêu cầu như thế này:

var request = new Request({
  url: 'http://myapi.com/orders',
  method: 'GET'
});
fetch(request);

Tuy nhiên, tôi không chắc cách thêm chuỗi truy vấn vào GETyêu cầu. Lý tưởng nhất, tôi muốn có thể đưa ra GETyêu cầu URLnhư sau:

'http://myapi.com/orders?order_id=1'

Trong jQuerytôi có thể làm điều này bằng cách chuyển {order_id: 1}như datatham số của $.ajax(). Có một cách tương đương để làm điều đó với cái mới Fetch API?

Cập nhật tháng 3 năm 2017:

Hỗ trợ URL.searchParams đã chính thức cập bến Chrome 51, nhưng các trình duyệt khác vẫn yêu cầu một polyfill .

Cách chính thức để làm việc với các tham số truy vấn chỉ là thêm chúng vào URL. Từ thông số kỹ thuật , đây là một ví dụ:

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(/* … */)

Tuy nhiên, tôi không chắc Chrome hỗ trợ thuộc searchParamstính của URL (tại thời điểm viết bài) nên bạn có thể muốn sử dụng thư viện của bên thứ ba hoặc giải pháp của riêng bạn .

Cập nhật tháng 4 năm 2018:

Với việc sử dụng hàm tạo URLSearchParams, bạn có thể gán một mảng 2D hoặc một đối tượng và chỉ cần gán nó cho url.searchthay vì lặp qua tất cả các khóa và nối thêm chúng

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: URLSearchParamscũng có sẵn trong NodeJS

const { URL, URLSearchParams } = require('url');

let params = {
  "param1": "value1",
  "param2": "value2"
};

let query = Object.keys(params)
             .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
             .join('&');

let url = 'https://example.com/search?' + query;

fetch(url)
  .then(data => data.text())
  .then((text) => {
    console.log('request succeeded with JSON response', text)
  }).catch(function (error) {
    console.log('request failed', error)
  });

Như đã trả lời, điều này là không thể với thông số kỹ thuật với fetch-API. Nhưng tôi phải lưu ý:

Nếu bạn đang trên node, có querystringgói. Nó có thể xâu chuỗi / phân tích các đối tượng / truy vấn:

var querystring = require('querystring')
var data = { key: 'value' }
querystring.stringify(data) // => 'key=value'

... sau đó chỉ cần thêm nó vào url để yêu cầu.

Tuy nhiên, vấn đề ở trên là, bạn luôn phải đặt trước một dấu hỏi ( ?). Vì vậy, một cách khác là sử dụng parsephương thức từ urlgói nút và thực hiện như sau:

var url = require('url')
var data = { key: 'value' }
url.format({ query: data }) // => '?key=value'

Xem querytại https://nodejs.org/api/url.html#url_url_format_urlobj

Điều này là có thể, vì nó thực sự chỉ trong nội bộ này :

search = obj.search || (
    obj.query && ('?' + (
        typeof(obj.query) === 'object' ?
        querystring.stringify(obj.query) :
        String(obj.query)
    ))
) || ''

Một cách tiếp cận ES6 súc tích:

fetch('https://example.com?' + new URLSearchParams({
    foo: 'value',
    bar: 2,
}))

Hàm toString () của URLSearchParam sẽ chuyển đổi đối số truy vấn thành một chuỗi có thể được thêm vào URL. Trong ví dụ này, toString () được gọi ngầm khi nó được nối với URL.

IE không hỗ trợ tính năng này, nhưng có sẵn các polyfill .

Bạn có thể sử dụng #stringifytừ chuỗi truy vấn

import { stringify } from 'query-string';

fetch(`https://example.org?${stringify(params)}`)

Có lẽ điều này là tốt hơn:

const withQuery = require('with-query');

fetch(withQuery('https://api.github.com/search/repositories', {
  q: 'query',
  sort: 'stars',
  order: 'asc',
}))
.then(res => res.json())
.then((json) => {
  console.info(json);
})
.catch((err) => {
  console.error(err);
});

encodeQueryString - mã hóa một đối tượng dưới dạng tham số chuỗi truy vấn

/**
 * Encode an object as url query string parameters
 * - includes the leading "?" prefix
 * - example input — {key: "value", alpha: "beta"}
 * - example output — output "?key=value&alpha=beta"
 * - returns empty string when given an empty object
 */
function encodeQueryString(params) {
    const keys = Object.keys(params)
    return keys.length
        ? "?" + keys
            .map(key => encodeURIComponent(key)
                + "=" + encodeURIComponent(params[key]))
            .join("&")
        : ""
}

encodeQueryString({key: "value", alpha: "beta"})
 //> "?key=value&alpha=beta"

Tôi biết điều này là rõ ràng tuyệt đối, nhưng tôi cảm thấy đáng để thêm nó như một câu trả lời vì nó đơn giản nhất trong tất cả:

var orderId = 1;
var request = new Request({
  url: 'http://myapi.com/orders?order_id=' + orderId,
  method: 'GET'
});
fetch(request);

Mẫu chữ cũng là một lựa chọn hợp lệ ở đây, và cung cấp một vài lợi ích.

Bạn có thể bao gồm các chuỗi thô, số, giá trị boolean, v.v .:

    let request = new Request(`https://example.com/?name=${'Patrick'}&number=${1}`);

Bạn có thể bao gồm các biến:

    let request = new Request(`https://example.com/?name=${nameParam}`);

Bạn có thể bao gồm logic và chức năng:

    let request = new Request(`https://example.com/?name=${nameParam !== undefined ? nameParam : getDefaultName() }`);

Theo như cấu trúc dữ liệu của một chuỗi truy vấn lớn hơn, tôi thích sử dụng một mảng được nối với một chuỗi. Tôi thấy nó dễ hiểu hơn một số phương pháp khác:

let queryString = [
  `param1=${getParam(1)}`,
  `param2=${getParam(2)}`,
  `param3=${getParam(3)}`,
].join('&');

let request = new Request(`https://example.com/?${queryString}`, {
  method: 'GET'
});

Chỉ làm việc với fetchModule của Nigencript và tìm ra giải pháp của riêng tôi bằng cách sử dụng thao tác chuỗi. Nối chuỗi truy vấn từng bit vào url. Dưới đây là một ví dụ nơi truy vấn được truyền dưới dạng đối tượng json (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 < queryLength) ? '&' : '';
            count++;
        }
    }
    // link becomes: 'http://myapi.com/orders?order_id=1'
    // Then, use fetch as in MDN and simply pass this fetchLink as the url.
}

Tôi đã thử nghiệm điều này qua nhiều số tham số truy vấn và nó hoạt động như một cơ duyên :) Hy vọng điều này sẽ giúp được ai đó.

var paramsdate = 01 + '% s' + 12 + '% s' + 2012 + '% s';

request.get (" https://www.exampleurl.com?fromDate= " + paramsDate;