Question

我正在提出这样的请求：

fetch("https://api.parse.com/1/users", {
  method: "GET",
  headers: headers,   
  body: body
})

如何传递查询字符串参数？我只是将它们添加到URL吗？我在docs中找不到一个例子。

Answer 1

您的第一个想法是正确的：只需将它们添加到网址即可。

请记住，您可以使用模板字符串（反引号）来简化将变量放入查询中。

    if ((c.Contains("tell me about")) || (c.Contains("Tell me about")))
        {
            string query = c;
            string[] lines = Regex.Split(query, "about ");
            string finalquery = lines[lines.Length - 1];

            string url = ("http://lookup.dbpedia.org/api/search.asmx/KeywordSearch?QueryString=" + finalquery + "&MaxHits=1");

                XmlReader reader = XmlReader.Create(url);
                while (reader.Read())

                    switch (reader.Name.ToString())
                    {
                        case "Description":
                            sp(reader.ReadString());
                            break;

                    }
        }

Answer 2

简短回答

只需将值替换为URL，如下所示：

const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

更长的答案

是的，您只需要自己将查询字符串添加到URL。您应该注意转义查询字符串参数，但是 - 不只构建一个像

这样的URL

`https://example.com/foo?bar=${someVariable}`

除非您确信someVariable绝对不包含任何&，=或其他特殊字符。

如果您在React Native之外使用fetch，则可以选择使用URLSearchParams对查询字符串参数进行编码。但是，React Native does not support URLSearchParams。相反，请使用encodeURIComponent。

例如：

const encodedValue = encodeURIComponent(someVariable);
fetch(`https://example.com/foo?bar=${encodedValue}`);

如果要将键和值的对象序列化为查询字符串，可以使用实用程序函数来执行此操作：

function objToQueryString(obj) {
  const keyValuePairs = [];
  for (const key in obj) {
    keyValuePairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
  }
  return keyValuePairs.join('&');
}

...并像这样使用它：

const queryString = objToQueryString({
    key1: 'somevalue',
    key2: someVariable,
});
fetch(`https://example.com/foo?${queryString}`);

Answer 3

我对Mark Amery's的回答做了一个简短的重复，将通过Airbnb的eslint定义，因为如今许多团队似乎都对此有要求。

        db.collection("users")
                .add(user)
                .addOnSuccessListener(new OnSuccessListener<DocumentReference>() {
                    @Override
                    public void onSuccess(DocumentReference documentReference) {
                        Log.d(TAG, "DocumentSnapshot added with ID: " + documentReference.getId());
                    }
                })
                .addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception e) {
                        Log.w(TAG, "Error adding document", e);
                    }
                });
        //End of save to database
       startActivity(new Intent(WelcomePage.this, HomePage.class));
        Toast.makeText(this, "Successfully Signed In",
                Toast.LENGTH_LONG).show();
        getEmailAddress();

    } catch (ApiException e) {
        // The ApiException status code indicates the detailed failure reason.
        // Please refer to the GoogleSignInStatusCodes class reference for more information.
        Log.w(TAG, "signInResult:failed code=" + e.getStatusCode());
       // updateUI(null);
    }
}

public void getEmailAddress()
{
    GoogleSignInAccount acct = GoogleSignIn.getLastSignedInAccount(WelcomePage.this);
    if (acct != null) {
        String personName = acct.getDisplayName();
        String personEmail = acct.getEmail();
        String personId = acct.getId();

    }


}

Answer 4

我处理这个的简单函数：

/**
 * Get query string
 *
 * @param   {*}   query   query object (any object that Object.entries() can handle)
 * @returns {string}      query string
 */
function querystring(query = {}) {
  // get array of key value pairs ([[k1, v1], [k2, v2]])
  const qs = Object.entries(query)
    // filter pairs with undefined value
    .filter(pair => pair[1] !== undefined)
    // encode keys and values, remove the value if it is null, but leave the key
    .map(pair => pair.filter(i => i !== null).map(encodeURIComponent).join('='))
    .join('&');

  return qs && '?' + qs;
}

querystring({one: '#@$code', two: undefined, three: null, four: 100, 'fi##@ve': 'text'});
// "?one=%23%40%24code&three&four=100&fi%23%23%40ve=text"
querystring({});
// ""
querystring('one')
// "?0=o&1=n&2=e"
querystring(['one', 2, null, undefined]);
// "?0=one&1=2&2" (edited)

Answer 5

这是一种es6方法

const getQueryString = (queries) => {
    return Object.keys(queries).reduce((result, key) => {
        return [...result, `${encodeURIComponent(key)}=${encodeURIComponent(queries[key])}`]
    }, []).join('&');
};

在这里，我们采用key: param形式的查询对象我们迭代并简化该对象的键，以构建一个编码查询字符串数组。最后，我们进行联接并返回此可附加的查询字符串。

Answer 6

是的，您应该在JS中有一些类可以帮助您提供方便的https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

e.g。如果你在javascript对象中有params说

let params = {one: 'one', two: 'two'}

你可以说这个功能

let queryString = new URLSearchParams()
for(let key in params){
  if(!params.hasOwnkey())continue
  queryString.append(key, params[key])
}

然后你可以通过说

来获得格式良好的查询字符串

queryString.toString()

Answer 7

接受的答案有效..但是如果你有更多的参数你就被搞砸了。我建议采用以下方法：

let route = 'http://test.url.com/offices/search';
if (method == "GET" && params) {
   const query = Object
            .keys(params)
            .map(k => {
                 if (Array.isArray(params[k])) {
                    return params[k]
                      .map(val => `${encodeURIComponent(k)}[]=${encodeURIComponent(val)}`)
                      .join('&')
             }

             return `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`
})
.join('&')

   route += `?${query}`;
}

编辑：更新了使用数组的答案

使用React Native中的Fetch获取查询字符串

7 个答案:

简短回答

更长的答案