英文:
Interceptor with reactjs not works as expected
问题
我正在尝试在API请求时实现全局级别的预加载器。我刚刚尝试了一个示例，但没有起作用。如何全局实现拦截器？
import axios from 'axios';
export default async (searchTerms) => {
try {
const url = `${process.env.SERVICE_URL}/get-jayachan-detais`;
const params = JSON.stringify({
orderInfoRequest: {
searchType: 'MASTER TRX',
MasterTrxnId: searchTerms.ordnum
}
});
const response = await axios.post(url, params, { withCredentials: true });
return {
errors: [],
response
};
} catch (e) {
return {
errors: [e]
};
}
};
axios.interceptors.request.use(function () {
console.log('start preloader');
});
axios.interceptors.response.use(function () {
console.log('stop preloader');
});
英文:
I am trying to implement a global level preloader on api request. I just tried it with sample. but not works. how to implement the interceptor globally?
import axios from 'axios';
export default async (searchTerms) => {
try {
const url = `${process.env.SERVICE_URL}/get-jayachan-detais`;
const params = JSON.stringify({
orderInfoRequest: {
searchType: 'MASTER TRX',
MasterTrxnId: searchTerms.ordnum
}
});
const response = await axios.post(url, params, { withCredentials: true });
return {
errors: [],
response
};
} catch (e) {
return {
errors: [e]
};
}
};
axios.interceptors.request.use(function () {
console.log('start preloader');
});
axios.interceptors.response.use(function () {
console.log('stop preloader');
});
答案1
得分: 5
在请求拦截器中返回 config 对象，在响应拦截器中返回 response 数据/错误：
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
console.log('开始加载');
return config;
}, function (error) {
console.error('错误：请求拦截器：', error);
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
console.log('停止加载');
return response;
}, function (error) {
console.error('错误：响应拦截器：', error);
return Promise.reject(error);
});
export default async (searchTerms) => {
try {
const url = `${process.env.SERVICE_URL}/get-jayachan-details`;
const params = {
orderInfoRequest: {
searchType: 'MASTER TRX',
MasterTrxnId: searchTerms.ordnum
}
};
const response = await axios.post(url, params, { withCredentials: true });
return {
errors: [],
response: response.data // 返回响应数据
};
} catch (e) {
return {
errors: [e]
};
}
};
此外，如果收到错误响应，这将有助于您更好地进行故障排除和调试。
英文:
Return the config object in the request interceptor and the response data/err in the response interceptor:
import axios from 'axios';
// Add a request interceptor
axios.interceptors.request.use(function (config) {
console.log('start preloader');
return config;
}, function (error) {
console.error('Error: request interceptor:', error);
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
console.log('stop preloader');
return response;
}, function (error) {
console.error('Error: response interceptor:', error);
return Promise.reject(error);
});
export default async (searchTerms) => {
try {
const url = `${process.env.SERVICE_URL}/get-jayachan-details`;
const params = {
orderInfoRequest: {
searchType: 'MASTER TRX',
MasterTrxnId: searchTerms.ordnum
}
};
const response = await axios.post(url, params, { withCredentials: true });
return {
errors: [],
response: response.data // Return response data
};
} catch (e) {
return {
errors: [e]
};
}
};
Additionally, suppose if you get error response, it will help you to troubleshoot and debug the issue well.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论