Reactjs 反应Axios拦截器并创建“不工作”
我正在尝试使用Axios和React。因为我的后端服务使用JWT,所以我编写了一个Axios请求拦截器,以便在每次向服务器发出请求时添加承载令牌。下面是代码片段。但是我在axiosinstance.post中的行中遇到了以下错误。如果使用axios.post,则侦听器不工作。你能告诉我出了什么问题以及如何解决这个问题吗Reactjs 反应Axios拦截器并创建“不工作”,reactjs,axios,Reactjs,Axios,我正在尝试使用Axios和React。因为我的后端服务使用JWT,所以我编写了一个Axios请求拦截器,以便在每次向服务器发出请求时添加承载令牌。下面是代码片段。但是我在axiosinstance.post中的行中遇到了以下错误。如果使用axios.post,则侦听器不工作。你能告诉我出了什么问题以及如何解决这个问题吗 Uncaught TypeError: Cannot read property 'post' of undefined at request (APIUtils.js:
Uncaught TypeError: Cannot read property 'post' of undefined
at request (APIUtils.js:9)
at login (APIUtils.js:23)
at Login.handleSubmit (login.js:36)
at HTMLUnknownElement.callCallback (react-dom.development.js:362)
at Object.invokeGuardedCallbackDev (react-dom.development.js:411)
at invokeGuardedCallback (react-dom.development.js:466)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:480)
at executeDispatch (react-dom.development.js:612)
at executeDispatchesInOrder (react-dom.development.js:637)
at executeDispatchesAndRelease (react-dom.development.js:743)
代码片段
axiosutilis.js
import axios from "axios";
import { API_BASE_URL, ACCESS_TOKEN } from '../constants';
const axiosinstance = axios.create({
timeout: 10000,
params: {} // do not remove this, its added to add params later in the config
});
// Add a request interceptor
axiosinstance.interceptors.request.use(
config => {
if(localStorage.getItem(ACCESS_TOKEN)) {
config.headers.append('Authorization', 'Bearer ' + localStorage.getItem(ACCESS_TOKEN))
}
config.headers['Content-Type'] = 'application/json';
return config;
},
error => {
Promise.reject(error)
});
export default axiosinstance;
const request = (options) => {
if(options.method === 'POST'){
return axiosinstance.post(options.url, JSON.stringify(options.data))
.then(response =>
response.json().then(json => {
if(!response.ok) {
return Promise.reject(json);
}
return json;
})
);
}
};
export function login(loginRequest) {
return request({
url: "/api/auth/signin",
method: 'POST',
data: JSON.stringify(loginRequest)
});
}
APIUtils.js
import axios from "axios";
import { API_BASE_URL, ACCESS_TOKEN } from '../constants';
const axiosinstance = axios.create({
timeout: 10000,
params: {} // do not remove this, its added to add params later in the config
});
// Add a request interceptor
axiosinstance.interceptors.request.use(
config => {
if(localStorage.getItem(ACCESS_TOKEN)) {
config.headers.append('Authorization', 'Bearer ' + localStorage.getItem(ACCESS_TOKEN))
}
config.headers['Content-Type'] = 'application/json';
return config;
},
error => {
Promise.reject(error)
});
export default axiosinstance;
const request = (options) => {
if(options.method === 'POST'){
return axiosinstance.post(options.url, JSON.stringify(options.data))
.then(response =>
response.json().then(json => {
if(!response.ok) {
return Promise.reject(json);
}
return json;
})
);
}
};
export function login(loginRequest) {
return request({
url: "/api/auth/signin",
method: 'POST',
data: JSON.stringify(loginRequest)
});
}
你的解决方案对我很有效。请找到我的代码沙盒!如果它不起作用,让我知道
我看到了您的示例,所有内容都在一个文件中。你能把它放在两个文件中,检查它是否适合你吗?更新了我的代码沙盒!看看Debopam。。谢谢不知怎的,它今天起作用了,但昨天不起作用:)嗨@Debopam,你能把这个标记为解决了吗!人们将更容易找到解决方案。谢谢