javascript - 我想在一个地方声明我的变量不重复代码,反应应用
问题描述
我的 api fetch 调用使用相同的标头,而不是为每个 api 调用函数重复变量,我可以将这些变量放在一个地方,然后调用这些变量吗?我曾尝试将它们放入一个函数然后调用该函数,但反应抱怨变量丢失。我正在使用一个类组件,我指的是解析的变量和重复的headersAPI,我希望它们在一个地方,理想情况下。
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 {..}
推荐阅读
- android-studio - IDE 致命错误 - 插件 Gradle 中的异常
- typescript - NestJS,尝试使用 ormconfig.ts,它破坏了一切
- postgresql - 如何为新的 GCP Cloud SQL PostgreSQL 用户授予 SELECT 权限?
- python-3.x - PySide2:QWidget 在装饰器中无法按预期工作
- directory - 织物纹理未加载
- powershell - powershell 导入 csv 并过滤名称以运行 enable-remotemailbox 并更新属性
- vue.js - 如何在 nuxtjs 中用作 vuetify 主题颜色
- javascript - 我的 Javascript 承诺实现有什么问题?
- javascript - 在 TypeScript webpack 项目中使用 JavaScript npm 包
- r - 将 checkboxGroupInput 的结果引用到 R Shiny 上的绘图中