英文:
request before another request axios
问题
如果要简化这段代码，可以尝试以下方式：
const getToken = async () => {
if (localStorage.getItem('token')) {
return localStorage.getItem('token');
} else {
const response = await axios(`${process.env.REACT_APP_BASE_URL}/api/user/info`);
const token = `Basic ${response.data.token}`;
localStorage.setItem('token', token);
return token;
}
};
const fetchData = async () => {
const token = await getToken();
axios.defaults.headers.common['Authorization'] = token;
const response = await axios.post(`${BASE_URL}/json/em/pos/poses`, {
limit,
offset,
contractType: 0,
...filter,
});
dispatch(reducerGetOutlets({ data: response.data, limit, offset: 0 }));
};
fetchData();
这段代码首先定义了一个getToken函数，用于获取并存储令牌。然后，定义了一个fetchData函数，它在获取令牌后设置请求头，并发起数据请求。这种方式更清晰和模块化，可以减少重复的代码块。
英文:
How can i simplify this code? I need to make a request to get the token, before requesting the server to get the data. Then write this token to localstorage so as not to re-call a request for a token.
if (localStorage.getItem('token')) {
axios.defaults.headers.common["Authorization"] = localStorage.getItem("token");
axios.post(`${BASE_URL}/json/em/pos/poses`, {
limit,
offset,
contractType: 0,
...filter,
})
.then((res) => {
dispatch(reducerGetOutlets({data: res.data, limit, offset: 0}));
});
} else {
axios(`${process.env.REACT_APP_BASE_URL}/api/user/info`)
.then((response) => {
axios.defaults.headers.common["Authorization"] = "Basic " + response.data.token;
localStorage.setItem("token", "Basic " + response.data.token);
axios.post(`${BASE_URL}/json/em/pos/poses`, {
limit,
offset,
contractType: 0,
...filter,
})
.then((res) => {
dispatch(reducerGetOutlets({data: res.data, limit, offset: 0}));
});
})
}
答案1
得分: 1
以下是已翻译的内容：
你可以采取一些方法来简化这段代码：
- 在API调用中使用
async/await语法，而不是回调函数。 - 将代码拆分为较小的函数。
例如：
async function getToken() {
if (localStorage.getItem('token')) {
return localStorage.getItem('token');
} else {
const response = await axios(`${process.env.REACT_APP_BASE_URL}/api/user/info`);
const token = "Basic " + response.data.token;
localStorage.setItem('token', token);
return token;
}
}
async function fetchData() {
const token = await getToken();
axios.defaults.headers.common["Authorization"] = token;
const response = await axios.post(`${BASE_URL}/json/em/pos/poses`, {
limit,
offset,
contractType: 0,
...filter,
});
dispatch(reducerGetOutlets({ data: response.data, limit, offset: 0 }));
}
fetchData();
在这里，你有两个函数：getToken()和fetchData()。
getToken()函数检查localStorage中是否存在令牌，如果不存在，则发出请求以获取令牌并将其写入localStorage。
fetchData()函数等待来自getToken()的令牌，设置Authorization头并发出请求。
希望这有所帮助。
英文:
You could do a couple things to simplify this code:
- Use
async/awaitsyntax for your API calls instead of callbacks - Split your code into smaller functions.
For example:
async function getToken() {
if (localStorage.getItem('token')) {
return localStorage.getItem('token');
} else {
const response = await axios(`${process.env.REACT_APP_BASE_URL}/api/user/info`);
const token = "Basic " + response.data.token;
localStorage.setItem('token', token);
return token;
}
}
async function fetchData() {
const token = await getToken();
axios.defaults.headers.common["Authorization"] = token;
const response = await axios.post(`${BASE_URL}/json/em/pos/poses`, {
limit,
offset,
contractType: 0,
...filter,
});
dispatch(reducerGetOutlets({ data: response.data, limit, offset: 0 }));
}
fetchData();
Here you get two functions: getToken() and fetchData().
getToken() function checks if the token is in the localStorage and if not it makes a request to get the token and writes it to localStorage.
fetchData() function awaits the token from getToken(), sets the Authorization header and makes the request.
Hope this helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论