Develop Reference

I want to use axios's return to global state ,but Promise { <pending> }

const Board = () => {
...
const {selected} = useSelector(state => state.board);
// In Redux reducer ->
// const initialState = {
// selected : {}
// }
const getOnePost = async (id) => {
try {
const response = await axios.get(`/api/v1/post/${id}`);
const getOnePostData = await response.data;
selected = getOnePostData //I want to use Redux to use global state...
console.log(selected) //TypeError... and How to use global state..?
} catch(error) {
alert(error.response.data.message);
return Promise.reject(error)
}
}
const postClickHandler = (postId) =>
{
if(postId) {
// dispatch(boardSelected(postId));
getOnePost(postId)
}
}
...
}
This code uses axios.get to receive post information.
and I want to use api's return to global state(Redux state).
const getOnePost = async (id) => {
try {
const response = await axios.get(`/api/v1/post/${id}`);
const getOnePostData = await response.data;
return getOnePostData //return data
} catch(error) {
alert(error.response.data.message);
return Promise.reject(error)
}
}
const postClickHandler = (postId) =>
{
if(postId) {
getOnePost(postId).then((response)=>{
return{...selected, selected: response} //But Seleted: {}
})
}
}

Axios is a Promised-based JavaScript library that is used to send HTTP requests,
you have to get the promise result in the then method .
try this
const Board = () => {
...
const {selected} = useSelector(state => state.board);
// In Redux reducer ->
// const initialState = {
// selected : {}
// }
const getOnePost = async (id) => {
try {
const response = await axios.get(`/api/v1/post/${id}`);
response.then(function (rec) {
selected = rec.data //
//here update you state
console.log(selected)
}).catch(function (error) {
console.log(error);
});
} catch(error) {
alert(error.response.data.message);
return Promise.reject(error)
}
}
const postClickHandler = (postId) =>
{
if(postId) {
// dispatch(boardSelected(postId));
getOnePost(postId)
}
}
...
}

You can handle promise by using .then()
Try to initialize selected like below :
const response = await axios.get(`/api/v1/post/${id}`).then( response => {
selected = response
})
I don't know what kind of data is it. So, try to log response data, and use it.

How to abort fetching HTTP request using AbortController on the same button

The problem is that I need to get only last API response by clicking a "Fetch Data" button. Earlier requests should be canceled.
The idea is to use AbrotController. Unfortunately, I have a problem, because the requests are not canceled and a console receives the message:
Fetch 1 error: Failed to execute 'fetch' on 'Window': The user aborted
a request.
Sample code below:
<button id="test">Fetch data</button>
let isLoading = false;
let controller = new AbortController();
const abort = () => controller.abort();
const button = document.getElementById("test");
const fetchData = () => {
controller = new AbortController();
if (isLoading) {
abort();
}
isLoading = true;
return fetch('https://jsonplaceholder.typicode.com/todos', {
signal: controller.signal
})
.catch(e => {
console.warn(`Fetch 1 error: ${e.message}`);
})
.finally(() => isLoading = false);;
}
button.addEventListener('click', () => {
fetchData();
});

It is because you call the controller.abort() on different instance than you initialized signal.
What about something like this?
let isLoading = false;
let controller = new AbortController();
const abort = () => controller.abort();
const button = document.getElementById("test");
const fetchData = () => {
if (isLoading) {
abort();
controller = new AbortController();
}
isLoading = true;
return fetch('https://jsonplaceholder.typicode.com/todos', {
signal: controller.signal
})
.catch(e => {
console.warn(`Fetch 1 error: ${e.message}`);
})
.finally(() => isLoading = false);
}
button.addEventListener('click', () => {
fetchData();
});

cancel multiple promises inside a promise on unmount?

hi i want to cancel promise on unmount since i received warning,
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
My code:
const makeCancelable = (promise: Promise<void>) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then(
(val) => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
(error) => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error))
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
};
useEffect(() => {
const initialize = async () => {
const getImageFilesystemKey = (remoteUri: string) => {
const [_, fileName] = remoteUri.split('toolbox-talks/');
return `${cacheDirectory}${fileName}`;
};
const filesystemUri = getImageFilesystemKey(uri);
try {
// Use the cached image if it exists
const metadata = await getInfoAsync(filesystemUri);
if (metadata.exists) {
console.log('resolve 1');
setFileUri(filesystemUri);
} else {
const imageObject = await downloadAsync(uri, filesystemUri);
console.log('resolve 2');
setFileUri(imageObject.uri);
}
// otherwise download to cache
} catch (err) {
console.log('error 3');
setFileUri(uri);
}
};
const cancelable = makeCancelable(initialize());
cancelable.promise
.then(() => {
console.log('reslved');
})
.catch((e) => {
console.log('e ', e);
});
return () => {
cancelable.cancel();
};
}, []);
but i still get warning on fast press, help me please?

You're cancelling the promise, but you are not cancelling the axios call or any of the logic that happens after it inside initialize(). So while it is true that the console won't print resolved, setFileUri will be called regardless, which causes your problem.
A solution could look like this (untested):
const makeCancelable = (promise: Promise<void>) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then(
val => (hasCanceled_ ? reject({ isCanceled: true }) : resolve(val)),
error => (hasCanceled_ ? reject({ isCanceled: true }) : reject(error))
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
}
};
};
const initialize = async () => {
const getImageFilesystemKey = (remoteUri: string) => {
const [_, fileName] = remoteUri.split("toolbox-talks/");
return `${cacheDirectory}${fileName}`;
};
const filesystemUri = getImageFilesystemKey(uri);
try {
// Use the cached image if it exists
const metadata = await getInfoAsync(filesystemUri);
if (metadata.exists) {
console.log("resolve 1");
return filesystemUri;
} else {
const imageObject = await downloadAsync(uri, filesystemUri);
console.log("resolve 2");
return imageObject.uri;
}
// otherwise download to cache
} catch (err) {
console.error("error 3", err);
return uri;
}
};
useEffect(() => {
const cancelable = makeCancelable(initialize());
cancelable.promise.then(
fileURI => {
console.log("resolved");
setFileUri(fileURI);
},
() => {
// Your logic is such that it's only possible to get here if the promise is cancelled
console.log("cancelled");
}
);
return () => {
cancelable.cancel();
};
}, []);
This ensures that you will only call setFileUri if the promise is not cancelled (I did not check the logic of makeCancelable).

Preventing Unnecessary Requests when update the input

How to preventing unnecessary requests when update the input?
I tried below solution.But in the App file, that search is declared but never used. I tried something like: https://alligator.io/react/live-search-with-axios/.
What is the variable let token in the fileutils.js. Should I assign let token = localStorage.getItem ('token') to this variable;?
App
import search from /.utils
class App extends Component {
constructor (props) {
super(props);
this.state = {
todos: [],
}
}
search = (query) => {
axios({
url: `/api/v1/todos/{query}`,
method: "GET"
})
.then(res => {
this.setState({
todos: res.data
});
})
.catch(error => {
console.log(error);
})
render () {
return (
<input onChange={this.search} />
)
}
}
utils.js
import axios from 'axios';
const makeRequestCreator = () => {
let token;
return (query) => {
// Check if we made a request
if(token){
// Cancel the previous request before making a new request
token.cancel()
}
// Create a new CancelToken
token = axios.CancelToken.source()
try{
const res = axios(query, {cancelToken: cancel.token})
const result = data.data
return result;
} catch(error) {
if(axios.isCancel(error)) {
// Handle if request was cancelled
console.log('Request canceled', error.message);
} else {
// Handle usual errors
console.log('Something went wrong: ', error.message)
}
}
}
}
const search = makeRequestCreator()
export default search;

You can do that with a function that delays executing of your onChange.you can use debounce function from lodash.js
// _.debounce(yourSearch function, delay time);
search(e){
let str = e.target.value;
_.debounce(() => yourFunction, 500);
}

Why axios doesn't remove elements from my variable?

I want to delete all completed tasks in my ToDo list.
In the code, I assign all completed tasks to the variable "completed". Next, I want to delete completed tasks from the server using axios.
removeItems = (event) => {
event.preventDefault();
let completed = [];
this.setState(prevState => {
return {
todos: prevState.todos.filter(todo => {
if (todo.completed == true) {
completed.push(todo)
}
return !todo.completed;
})
}
})
console.log(completed);
const remove = completed.map(async (todo) => {
await Axios.delete(`http://localhost:8000/todoes_destroy/{id}/`)
})
}

I changed the code and now it works. This is the solution,
removeItems = async (event) => {
event.preventDefault();
const completed = this.state.todos.filter(todo => {
return todo.completed
});
const remove = completed.map( async (todo) => {
console.log(todo);
await Axios.delete(`http://localhost:8000/todoes_destroy/${todo.id}/`)
}
)
const {data} = await Axios.get('http://127.0.0.1:8000/todoes_read/', {
})
this.setState({todos : data})
}