I'm trying to make a DELETE request using Axios on my API built with Django rest framework but I keep on getting '403 (forbidden)'
here is my code...
export const deleteLead = (id) => (dispatch) => {
axios
.delete(`/api/leads/${id}/`)
.then((res) => {
dispatch({
type: DELETE_LEAD,
payload: id,
});
})
.catch((err) => console.log(err));
};
Related
Here is a request from my Vue component:
submit() {
axios
.put(`/api/posts/${this.slug}`, this.fields, {
headers: { "content-type": "multipart/form-data" },
})
.then((res) => {
// some logic
})
.catch((error) => {
// some logic
});
}
api.php
Route::group(['prefix' => 'posts', 'middleware' => 'auth:sanctum'], function () {
Route::put('/{post:slug}', [PostController::class, 'update']);
});
put method doesn't work. I get the following error xhr.js:220 PUT http://127.0.0.1:8000/api/posts/test-title-updated-33 422 (Unprocessable Content) but when I replace put with post everything works as expected. I don't understand why put is not working.
Because HTTP PUT is not recognized by HTML standard.
You need to add POST type of method only but for update you can add a small flag with POST request for a PUT/PATCH type of operation.
axios.post(`/api/posts/${this.slug}`, { // <== use axios.post
data: this.fields,
_method: 'patch' // <== add this field
})
I have to show a message "Request for execution sent" after the ajax call is made but before the response is received in axios.
axios
.post('executeTask', {
id,
status,
name
})
.then(response => {
})
.catch(error => {
});
Just show message before handling your promise:
var promise = axios
.post('executeTask', {
id,
status,
name
});
// show message here
promise.then(response => {
})
.catch(error => {
});
I am subscribing to presence channel and get the below-given error:
XHR failed loading: POST "http://127.0.0.1:8000/broadcasting/auth".
The POST request succeeds only after I reload the page(I've check the console). How to make it(POST call) pass without the need of reloading the page?
<tr v-for="user in users">
<td>{{user.name}}</td>
<td>{{user.ip}}</td>
</tr>
data() {
return {
users:[]
}
},
mounted() {
window.Echo.join('privateChannel')
.here(users => (this.users = users))
.joining(user => (this.users.push(user)))
.leaving(user => (this.users = this.users.filter(u => (u.id
!==user.id)))
);
this.fetchData()
},
methods: {
fetchData(){
axios
.get('api/users')
.then(res => (this.users= res.data))
.catch(err => console.log(err));
},
}
}
You are using get instead of post
Try this -
fetchData(){
axios
.post('api/users')
.then(res => (this.users= res.data))
.catch(err => console.log(err));
I am trying to combine fetch API and promises
When I do this, everything works
queryAPI(currency, cryptocurrency){
const url = fetch('https://api.coinmarketcap.com/v1/ticker/')
.then(response => response.json())
.then(data => console.log(data));
}
However, when I try to store it in a variable, the promise keeps pending
queryAPI(currency, cryptocurrency){
const url = fetch('https://api.coinmarketcap.com/v1/ticker/')
.then(response => {
const user = response.json()
console.log(user);
});
}
1) What am I doing wrong?
2) Is there any way I can get the value of the "user" outside of the function?
Thanks
The .json method also returns a promise. You have to call .then once again to get the final result:
queryAPI(currency, cryptocurrency){
const url = fetch('https://api.coinmarketcap.com/v1/ticker/')
.then(response => response.json())
.then(user => console.log(user))
}
so you could return the chained .thens from the queryAPI method and use it in the rest of your code:
const queryAPI = (currency, cryptocurrency) => {
return new Promise((resolve, rej) => {
return fetch('https://api.coinmarketcap.com/v1/ticker/')
.then(response => response.json())
.then(data => resolve({user: data, currency: 'EUR'}))
.catch(e => rej(e))
});
};
queryAPI('EU', 'bitcoin').then(data => {
console.log(data.user);
console.log(data.currency)
});
I have this add method in my vue script
if (this.edit === false) {
this.link.link = submitEvent.target.elements.link.value;
fetch('products', {
method: 'POST',
body: JSON.stringify(this.link),
headers: {
'content-type': 'application/json'
}
})
.then(res => res.json())
.then(res => { // this does not get executed
this.qrcode.redirect_url = "";
alert('Added');
this.fetchAll()
})
.catch(err => console.log(err.res));
}
}
When I fill the form the request is send and entry is made to the database but I do not get response.
I am using laravel as backend and Add method in Controller returns 200 response after creation.
What could cause it and why console.log(err) does not not display anything?