I want to pass two parameters with symbols into API (using Axios get), but the errors come out [[PromiseState]]: "rejected". If pass two parameters without symbols into API, it can be worked and the messages come out [[PromiseState]]: "fulfilled".
The console log (two parameters with symbols) error results like below, the two parameters sample which are companyName=ABC SDN BHD !!!!@@@@#$%^&*() and branchName=ABC !@#$%^&*()_ :
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Error: Request failed with status code 400 at createError (http://localhost:3005/static/js/43.chunk.js:215670:15) at settle (http://localhost:3005/static/js/43.chunk.js:215891:12) at XMLHttpRequest.handleLoad (http://localhost:3005/static/js/43.chunk.js:215145:7)
config: {url: '/api/branch_detail?companyName=ABC SDN BHD !!!!@@@@#$%^&*()&branchName=ABC !@#$%^&*()_', method: 'get', headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
isAxiosError: true
request: XMLHttpRequest {readyState: 4, open: ƒ, send: ƒ, setRequestHeader: ƒ, onreadystatechange: ƒ, …}
response:
config: {url: '/api/branch_detail?companyName=ABC SDN BHD !!!!@@@@#$%^&*()&branchName=ABC !@#$%^&*()_', method: 'get', headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data:
errors: {branchName: Array(1)}
status: 400
title: "One or more validation errors occurred."
traceId: "00-a1135d9712bfaf41829960bc64228418-fd38e977891bca4a-00"
type: "https://tools.ietf.org/html/rfc7231#section-6.5.1"
[[Prototype]]: Object
headers: {connection: 'close', content-encoding: 'gzip', content-type: 'application/json; charset=utf-8', date: 'Mon, 11 Jul 2022 03:38:54 GMT', transfer-encoding: 'chunked', …}
request: XMLHttpRequest {readyState: 4, open: ƒ, send: ƒ, setRequestHeader: ƒ, onreadystatechange: ƒ, …}
status: 400
statusText: "Bad Request"
[[Prototype]]: Object
toJSON: ƒ ()
message: "Request failed with status code 400"
stack: "Error: Request failed with status code 400\n at createError (http://localhost:3005/static/js/43.chunk.js:215670:15)\n at settle (http://localhost:3005/static/js/43.chunk.js:215891:12)\n at XMLHttpRequest.handleLoad (http://localhost:3005/static/js/43.chunk.js:215145:7)"
[[Prototype]]: Object
constructor: ƒ Error()
message: ""
name: "Error"
toString: ƒ toString()
The console log (two parameters without more symbols) correct results like below, the two parameters sample which are companyName=ABC SDN BHD 72 and branchName=USER21:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
config: {url: '/api/branch_detail?companyName=ABC SDN BHD 72&branchName=USER21', method: 'get', headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data: {id: '1f469c57-c53f-4ef3-e0f7-08da59982377', tenantID: '0921295e-41dd-4be8-0d4d-08da3d8e0c78', code: 'USER21', phoneNo: '60196588555', email: 'ason5861 [email protected]', …}
headers: {connection: 'close', content-encoding: 'gzip', content-type: 'application/json; charset=utf-8', date: 'Mon, 11 Jul 2022 03:42:59 GMT', transfer-encoding: 'chunked', …}
request: XMLHttpRequest
open: ƒ shim()
send: ƒ shim()
setRequestHeader: ƒ shim()
onabort: ƒ handleAbort()
onerror: ƒ handleError()
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: ƒ handleLoad()
ontimeout: ƒ handleTimeout()
readyState: 4
response: "{\"id\":\"1f469c57-c53f-4ef3-e0f7-08da59982377\",\"tenantID\":\"0921295e-41dd-4be8-0d4d-08da3d8e0c78\",\"code\":\"USER21\",\"phoneNo\":\"60196588555\",\"email\":\"ason5861 [email protected]\",\"contactPerson\":\"ALEX CHONG\",\"contactPersonPhone\":\"60195678994\",\"contactPersonEmail\":\"ason5861 [email protected]\",\"address\":\"No. 129, Jalan Bangsar\",\"city\":\"Selangor\",\"state\":\"Kuala Lumpur\",\"postcode\":\"59200 \",\"hasLogo\":false,\"logoType\":\"\",\"practiceType\":\"Medical\",\"practiceTypeID\":\"b95b2b99-2d9a-49cf-bed6-08d92b3484f9\",\"subscritiopnID\":\"25cbc36d-e591-4d26-48e7-08da599933c4\",\"planID\":20,\"planName\":\"Trial\",\"status\":\"Active\",\"startDate\":\"2022-06-29T14:32:56\",\"expiredDate\":\"2022-12-29T00:00:00\",\"renewalCycle\":\"Monthly\",\"totalPrice\":2.0000}"
responseText: "{\"id\":\"1f469c57-c53f-4ef3-e0f7-08da59982377\",\"tenantID\":\"0921295e-41dd-4be8-0d4d-08da3d8e0c78\",\"code\":\"USER21\",\"phoneNo\":\"60196588555\",\"email\":\"ason5861 [email protected]\",\"contactPerson\":\"ALEX CHONG\",\"contactPersonPhone\":\"60195678994\",\"contactPersonEmail\":\"ason5861 [email protected]\",\"address\":\"No. 129, Jalan Bangsar\",\"city\":\"Selangor\",\"state\":\"Kuala Lumpur\",\"postcode\":\"59200 \",\"hasLogo\":false,\"logoType\":\"\",\"practiceType\":\"Medical\",\"practiceTypeID\":\"b95b2b99-2d9a-49cf-bed6-08d92b3484f9\",\"subscritiopnID\":\"25cbc36d-e591-4d26-48e7-08da599933c4\",\"planID\":20,\"planName\":\"Trial\",\"status\":\"Active\",\"startDate\":\"2022-06-29T14:32:56\",\"expiredDate\":\"2022-12-29T00:00:00\",\"renewalCycle\":\"Monthly\",\"totalPrice\":2.0000}"
responseType: ""
responseURL: "http://localhost:3005/api/branch_detail?companyName=ABC SDN BHD 72&branchName=USER21"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, one rror: null, onl oad: null, …}
withCredentials: false
[[Prototype]]: XMLHttpRequest
status: 200
statusText: "OK"
My coding:
export function getBranchDetail(companyName, branchName) {
return axios.get(GET_BRANCH_DETAIL_URL companyName "&branchName=" branchName);
}
Hope someone can guide me on how to solve [[PromiseState]]: "rejected" this problems. Thanks.
CodePudding user response：
Your query parameters are not encoded correctly. Axios offers a convenience config property for this very thing.
First, remove the companyName parameter from your URL
export const GET_BRANCH_DETAIL_URL = "/api/branch_detail";
Then use the params config
axios.get(GET_BRANCH_DETAIL_URL, {
params: { companyName, branchName }
});
This will correctly make a request to the URL /api/branch_detail?companyName=ABC SDN BHD !!!!@@@@#$%^&*()&branchName=ABC !@#$%^&*()_