新的打字/React,并寻求帮助,特别是这个错误,并在一般任何其他不正确的。
我有一个名为api-client.ts的axios API客户端
//import axios, {CanceledError} from "axios";
import { default as axios } from 'axios'
import { setupCache } from 'axios-cache-interceptor';
import { ReasonPhrases, StatusCodes, getReasonPhrase, getStatusCode, } from 'http-status-codes';
import { useNavigate } from "react-router-dom";
function apiClient() {
const axiosInstance = axios.create({
withCredentials: true,
baseURL: "https://localhost:44372/api/v1/",
headers: {
"Content-type": "application/json"
},
timeout: 60 * 1000 // 1 minute.
//disabled this to implement react-error-boundary (https://www.npmjs.com/package/react-error-boundary)
/* ,
validateStatus: function (status) {
return status < StatusCodes.INTERNAL_SERVER_ERROR; //this allows axios to not treat status as error codes https://axios-http.com/docs/handling_errors
} */
});
const navigate = useNavigate();
axiosInstance.interceptors.response.use(
(response) => {
//debugger;
return response;
},
(error) => {
//debugger;
switch (error.response.status) {
case 401:
// Handle Unauthorized calls here
// Display an alert
break;
case 403:
// Handle Unauthorized calls here
// Display an alert
//alert('403 Unauthorized');
navigate("/status/404");
break;
case 500:
// Handle 500 here
// redirect
break;
// and so on..
}
if (error.response.status == 400) {
}
return Promise.reject(error);
}
);
const apiClientCached = setupCache(axiosInstance);
return apiClientCached;
}
export default apiClient;
我将其导入到我的服务中(auth-service.ts)
//import {apiClientOld} from "./api-client-old";
import apiClient from "./api-client";
class AuthService {
getLoggedInUser() {
return apiClient.get(`/Authorization/GetLoggedInUser`);
}
getLoggedInUserRoles() {
return apiClient.get(`/Authorization/GetSecurityAttributesAsync`);
}
testAuthorized() {
return apiClient.get('/Authorization/TestAuthorized');
}
testUnauthorized() {
return apiClient.get('/Authorization/TestUnauthorized');
}
}
export default new AuthService();
我试图解决的问题是为什么.get抛出这个异常
Property 'get' does not exist on type '() => AxiosCacheInstance'.
提前感谢您
我的旧代码可以工作,尽管我不得不将其重写为一个函数组件,以便导航工作。
api-client-old.ts
import axios, {CanceledError} from "axios";
import { setupCache } from 'axios-cache-interceptor';
import { ReasonPhrases, StatusCodes, getReasonPhrase, getStatusCode, } from 'http-status-codes';
import { useNavigate } from "react-router-dom";
const axiosInstance = axios.create({
withCredentials: true,
baseURL: "https://localhost:44372/api/v1/",
headers: {
"Content-type": "application/json"
},
timeout: 60 * 1000 // 1 minute.
//disabled this to implement react-error-boundary (https://www.npmjs.com/package/react-error-boundary)
/* ,
validateStatus: function (status) {
return status < StatusCodes.INTERNAL_SERVER_ERROR; //this allows axios to not treat status as error codes https://axios-http.com/docs/handling_errors
} */
})
export const apiClient = setupCache(axiosInstance)
export {CanceledError};
const navigate = useNavigate();
axiosInstance.interceptors.response.use(
(response) => {
//debugger;
return response;
},
(error) => {
//debugger;
switch (error.response.status) {
case 401:
// Handle Unauthorized calls here
// Display an alert
break;
case 403:
// Handle Unauthorized calls here
// Display an alert
//alert('403 Unauthorized');
navigate("/status/404");
break;
case 500:
// Handle 500 here
// redirect
break;
// and so on..
}
if (error.response.status == 400) {
}
return Promise.reject(error);
}
);
1条答案
按热度按时间i2loujxw1#
如果你调用return apiClient().get('/Authorization/TestUnauthorized')会怎么样?