Javascript 我想在一个地方声明我的变量,以避免重复代码,react app
我的api fetch调用使用相同的头,而不是重复每个api调用函数的变量,我可以将这些变量放在一个位置,然后调用这些变量吗?我曾尝试将它们放入一个函数中,然后调用该函数,但react抱怨缺少变量。我使用的是一个类组件,我引用的变量被解析和headersAPI被重复,我希望它们放在一个地方,理想情况下Javascript 我想在一个地方声明我的变量,以避免重复代码,react app,javascript,reactjs,spotify,Javascript,Reactjs,Spotify,我的api fetch调用使用相同的头,而不是重复每个api调用函数的变量,我可以将这些变量放在一个位置,然后调用这些变量吗?我曾尝试将它们放入一个函数中,然后调用该函数,但react抱怨缺少变量。我使用的是一个类组件,我引用的变量被解析和headersAPI被重复,我希望它们放在一个地方,理想情况下 componentDidMount() { this.getUserProfile(); this.searchBands(); } getUserProfile(
componentDidMount() {
this.getUserProfile();
this.searchBands();
}
getUserProfile() {
let parsed = new URLSearchParams(window.location.search).get(
"access_token"
);
parsed = { token: parsed };
console.log(parsed.token);
let headersAPI = {
headers: { Authorization: "Bearer " + parsed.token }
};
fetch(`https://api.spotify.com/v1/me`, headersAPI)
.then(response => response.json())
.then(data =>
this.setState({
userName: data.display_name,
log: console.log(data)
})
)
.catch(error =>
this.setState({
log: console.error("Error:", error),
errorApi: true
})
);
}
searchBands(name) {
let parsed = new URLSearchParams(window.location.search).get(
"access_token"
);
parsed = { token: parsed };
console.log(parsed.token);
let headersAPI = {
headers: { Authorization: "Bearer " + parsed.token }
};
let searchName = this.state.searchName === "" ? "The Cure" : name;
//search band
fetch(
`https://api.spotify.com/v1/search?q=${searchName}&type=artist`,
headersAPI
)
.then(response => response.json())
.then(data =>
this.setState({
artistName: data.artists.items[0],
log: console.log(data),
image: data.artists.items[0].images[0].url
})
)
.catch(error =>
this.setState({
log: console.error("Error:", error),
errorApi: true
})
);
}
我只是把变量放在类声明之外,然后在api调用函数中调用它们,看起来很有效
const parsed = new URLSearchParams(window.location.search).get("access_token");
const headersAPI = {
headers: { Authorization: "Bearer " + parsed }
};
class App extends Component {..}
在对象上创建一个获取这些值或属性的方法?使它们成为对象的属性
this.headers
或this.parsed
?请告诉我,我不完全明白你的意思