배경
최근에 vue 프로젝트를 작성할 때 axios 호출 인터페이스 핏을 만났습니다. axios와 관련된 프런트 엔드 모듈이 여러 인터페이스를 호출 한 다음 데이터를 요청한 후 windows.location.href를 사용하여 새 페이지로 리디렉션합니다. 그러나 axios에서 요청한 인터페이스가 모두 취소 된 상태임을 확인했습니다.
예 :
axios.get ( '/ url1')
.then (function (response) {
console.log (response);
})
.catch (function (error) {
console.log (error);
});
axios.get ( '/ url2')
.then (function (response) {
console.log (response);
})
.catch (function (error) {
console.log (error);
});
windows.location.href = "/
이렇게 작성하면 axios 호출 인터페이스가 비동기식이므로 url1 및 url2가 요청되기 전에 windows.location.href가 실행될 가능성이 큽니다. 이때 현재 페이지에 새 페이지가 열리고 url1 및 url2 요청은 모두 chrome f12 콘솔을 통해 취소 된 상태입니다.
StackOverflow 온라인에서 암에 대한 설명은 다음과 같습니다.
1. 요청을 유발 한 DOM 요소가 삭제되었습니다 (즉, IMG가로드 중이지만로드가 발생하기 전에 IMG 노드를 삭제했습니다).
2. 데이터로드를 불필요하게 만드는 작업을 수행했습니다. (즉, iframe로드를 시작한 다음 src를 변경하거나 내용을 덮어 씀)
3. 동일한 서버로가는 요청이 많고 이전 요청의 네트워크 문제로 인해 후속 요청이 작동하지 않는 것으로 나타났습니다 (DNS 조회 오류, 이전 (동일한) 요청 결과 예 : HTTP 400 오류 코드 등).
간단히 말해서 요소 또는 요청이 아직 완료되지 않은 경우 중단됩니다.
해결책
여기에는 두 가지 방법이 있습니다. 첫 번째는 axios 요청 완료 처리 흐름에서 windows.location.href를 직접 래핑하는 것입니다. 아래:
axios.get ( '/ url1')
.then (function (response) {
axios.get ( '/ url2')
.then (function (response) {windows.location.href = "/"
})
.catch (function ( 오류) {
console.log (error);
});
})
.catch (function (error) {
console.log (error);
});
이것의 장점은 url1과 url2가 모두 성공적으로 요청 될 때까지 페이지가 점프하지 않는다는 것입니다. 그러나 새로운 질문이 있습니다. 리디렉션하기 전에 url1과 url2를 여러 번 요청하려면 어떻게 작성해야합니까? 예 :
for （循环）
{
axios.get ( '/ url1')
.then (function (response) {
axios.get ( '/ url2')
.then (function (response) {
})
.catch (function (error) {
console .log (error);
});
})
.catch (function (error) {
console.log (error);
});
} windows.location.href = "/"
이 경우 axios 요청이 완료되기 전에 점프 할 수 있습니다. Axios는 비동기식이므로 windows.location.href가 axios보다 먼저 실행될 수 있습니다.
다음은 windows.location.href의 실행 타이밍을 지연시키기 위해 타이머를 사용하는 까다로운 방법입니다.
setTimeout (function () {
windows.location.href = "/"
}, 2000);
이렇게 작성하면 기본적으로 windows.location.href가 axios 이후에 실행된다는 것이 보장됩니다 (axios 호출 인터페이스 및 비즈니스 로직 처리 시간에 따라 다름).
Blogger : 수익 창출을위한 테스트
모토 : 테스트 및 자동화에 초점을 맞추고 R & D 효율성을 개선하기 위해 노력합니다. 테스트 및 부지런함을 통해 원래 축적을 완료하고 읽기 및 재정 관리를 통해 재정적 자유를 얻습니다.
csdn ：https://blog.csdn.net/ccgshigao
블로그 파크 : https://www.cnblogs.com/qa-freeroad/