This question already has answers here:
Is there any reasons to use axios instead ES6 fetch [closed]
(3 answers)
Closed last month.
I am working on nextjs(reactjs framework) Right now i want to know the difference
betweeen "axios" and "await fetch" ? In which situation we should use "axios" ? For example here is my code
const response = await fetch(`/api/comments/${commentId}`, {
method: 'DELETE'
})
Different properties are used for a post request to send data to the endpoint - Axios uses the data property, whereas with fetch we use the body property. We need to serialize data into a JSON string to send data. Axios automatically stringifies data when sending JavaScript objects to the API using the POST method.
for more information you can check form this https://codilime.com/blog/axios-vs-fetch/#:~:text=Different%20properties%20are%20used%20for,API%20using%20the%20POST%20method.
Related
I am new to GraphQL and I am have the query working as expected but I am having trouble working with the response.
Query
query {
all_assets(where: {title: "suppliestile-blt9607aa6a28539d2e.zip"}) {
items {
url
}
}
}
Calling Response
var jsondata = JSON.stringify(response.data);
console.log(jsondata);
This is giving me the following response
{"data":{"all_assets":{"items":[{"url":"https://assets.contentstack.io/v3/assets/blt15ad871ba49b8a41/blta52af33b959c061f/6352b5fb3bd922566d8d3f2d/suppliestile-blt9607aa6a28539d2e.zip"}]}}}
Essentially I would like to use the url value as a variable moving forward but I am having trouble extracting it from all of the nested objects and arrays does anyone have any advice to get me pointed in the right direction?
The answer won't differ because it's a Graphql request. It's just a response that you get through the request via response.data.
If you need to access specific object/property within the response , you need to use the index of the object, you can do
const url = response.data.all_assets.items[0].url;
This question already has an answer here:
How to send the raw-data with GET request in jQuery ajax?
(1 answer)
Closed 1 year ago.
My Url Params are too big. So I'm trying to get that content with passing it in request.body. The API works fine with postman while testing. But not able to fetch it in React
I'm using ExpressJS
API: http://localhost:5000/api/v1
React Code:
let result = await fetch("http://localhost:8080/autocomplete",{
method: 'GET',
body: {
"text": "something new"
}
});
console.log(await result.json()) // Not get my data here
ERROR:
TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have a body.
How i solve this issue ?
It is expected.
From mozilla docs, it mentioned: The HTTP GET method requests a representation of the specified resource. Requests using GET should only be used to request data (they shouldn't include data).
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET
This question already has answers here:
Sending Request body for GET method in AXIOS throws error
(3 answers)
Closed 2 years ago.
I want to send empty object in http get request body to work api on angular 10. Our api server need empty request body object in GET request.
I want like this
{
method: 'get',
url: 'http://domain.api.com/api/method?param1=value1',
body: {
key:value
}
}
Note: I dont want to use POST method for send request body.
You should use Post for a payload within a GET request message has no defined semantics; sending a payload body on a GET request might cause some existing implementations to reject the request.
You can read more detail here
I am trying to receive the raw response data, not the response headers or body. As an example, an image here shows the tab where this data is found:
Now, I am trying to receive this data when making an HTTP Request using `Axios`. Is this even possible?
I have tried searching online for about 2 hours, as this was a huge problem I was facing. I tried other sites, including stack overflow, to get the correct answer. If possible, could you please answer my question if you know? Thanks in advance.
const axios = require('axios');
const url = 'https://old.reddit.com/api/login?user=username&passwd=password'
function axiosTest() {
return axios.post(url).then((r) => {
console.log(r)
})
}
I'm pretty sure you must access the data property in the response object r. Also - since you are using the reddit API - make sure you are providing api_type in the request url (api_type=json for instance):
const axios = require('axios');
const url = 'https://old.reddit.com/api/login?api_type=json&user=username&passwd=password'
function axiosTest() {
return axios.post(url).then((r) => {
console.log(r.data)
return r.data;
})
}
For anyone reading this: Just to clarify, the api_type parameter in the request url is specific to the reddit API and most likely won't work any other API.
There's a webapp that makes a request (let's call it /api/item). This request returns a json body with a field called itemData which is normally hidden from the user, but I want to make that shown.
So how do I make a userscript that listens for the request at /api/item and displays the itemData field?
For reference the way the webapp is making the request is:
return Promise.resolve(new Request(e,r)).then(sendCookies).then(addLangParam).then(addCacheParam).then(addXsrfKey).then(checkZeroRating).then(function(e) {
return fetch(e)
}).then(checkStatus).then(checkApiVersionMismatch).then(checkApiResponse)
Most of that is irrelevant, but the important part is Request (I think).
This webapp is not using XMLHttpRequest, but the Fetch API.
You can use the fetch-intercept npm module to intercept fetch requests. Example code:
import fetchIntercept from 'fetch-intercept'
fetchIntercept.register({
response(response) {
console.log(response)
return response
}
})
Do you have access to the promise returned ?
If so, then you may add another "then".
Otherwise, you may overwrite "checkApiResponse"