如何解决Axios.get 返回状态码 400 无法弄清楚出了什么问题 (SODAapi)
无法弄清楚我的 axios 调用有什么问题。 任何帮助将不胜感激。
所以我有一个 onClick 搜索栏,它会将搜索词发送到编译 Api 查询字符串的函数。
const SearchForm = () => {
const [searchTerm,setSearchTerm] = useState({
searchTerm : "",boro: ""
});
const handleChange = e => {
const { value,name } = e.target;
setSearchTerm((e)=>{
return {
...searchTerm,[name] : value
}
});
};
const handleSubmit = async (e) => {
e.preventDefault();
debugger
const res = await SodaApi.searchResta(searchTerm.searchTerm,searchTerm.boro);
console.log(res)
setSearchTerm("");
}
return (
<form className="SearchForm" onSubmit={handleSubmit}>
<label htmlFor="searchBar">Restaurant Name:</label>
<input type="text"
id="searchBar"
name="searchTerm"
placeholder="Enter Restaurant Name"
value={searchTerm.searchTerm}
onChange={handleChange}
/>
<label htmlFor="boro">Borough: <span>*</span></label>
<select id="boro"
name="boro"
value={searchTerm.boro}
onChange={handleChange}
required
>
<option value="" defaultValue disabled hidden>Select a Boro</option>
<option value="brooklyn">brooklyn</option>
<option value="Manhattan">Manhattan</option>
<option value="Staten Island">Staten Island</option>
<option value="bronx">bronx</option>
<option value="Queens">Queens</option>
</select>
<button className="SearchFormButton" type="submit">Search</button>
</form>
)
}
export default SearchForm;
这里是编译函数
class SodaApi {
static token;
static async searchResta (searchTerm,boro) {
const headerOptions = {
headers : {
'X-App-Token' : `${config.MY_APP_TOKEN}`
}
};
const queryOptions = `$query=SELECT camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude WHERE dba like '%${searchTerm.toupperCase()}%' AND boro = '${boro}'`;
const sodaApiQueryString = config.NYC_RESTA_API_URL + queryOptions;
const results = await axios.get( sodaApiQueryString,headerOptions);
const cleanedResults = consolidate(results);
return cleanedResults
};
这是我返回的示例查询字符串。我打电话给 Soda Api。
https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20camis,longitude%20WHERE%20dba%20like%20%27%sTAR%%27%20AND%20boro%20=%20%27brooklyn%27
我返回的错误是这个
GET https://data.cityofnewyork.us/resource/43nn-pn8j.json?$query=SELECT%20camis,longitude%20WHERE%20dba%20like%20%27%sTAR%%27%20AND%20boro%20=%20%27brooklyn%27 400 (Bad Request)
Uncaught (in promise) Error: Request Failed with status code 400
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)
我没有得到的是如果我在 INSOMNIA 中发送了相同的查询字符串,我会得到状态代码 200,并且我得到了我想要的数据。 但是为什么当我用我的搜索栏发送它时,我得到了一个 400 错误。我尝试取出我的标头令牌,尝试使用不同的查询进行搜索。我的应用程序再次不起作用,但如果我使用相同的查询字符串,我会从我的 chrome 控制台返回并与 INSOMNIA 一起发送它。
怎么会??
解决方法
查询字符串中的 %
字符未正确编码。它们应编码为 %25
。见https://developers.google.com/maps/documentation/urls/url-encoding
使用 Axios 确保这一点的最简单方法是使用 params
配置。那里的任何键/值都将进行 URL 编码。
const options = {
headers : {
'X-App-Token': config.MY_APP_TOKEN
},params: {
"$query": `SELECT camis,dba,boro,building,street,zipcode,phone,cuisine_description,inspection_date,action,violation_code,violation_description,critical_flag,score,grade,grade_date,record_date,inspection_type,latitude,longitude WHERE dba like '%${searchTerm.toUpperCase()}%' AND boro = '${boro}'`
}
};
const results = await axios.get(config.NYC_RESTA_API_URL,options);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。