ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요

ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요

QA

ajax를 axios 로 대체 하려고 합니다. 어떤식으로 바꿔야하는지요

본문

안녕하세요.

ajax통신으로 문제가 자주 발생해 axios 로 대체해보려고 합니다.

제이쿼리 처럼  상단에

<script src="주소:unpkg.com/axios/dist/axios.min.js"></script>

선언하고 사용 가능한지요?

 

아작스로 한 부분을 axios 로 어떻게 변경하나요..?

 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 
<script>
function login_app()
{
 $.ajax({
  url: 'https://api.주소~~'
  type: "POST",
  dataType: 'json',
  data: {
   identifier: $("#identifier").val(),
   password: $("#password").val(),
  },
  success: function(data) {
   alert('성공--' + data['user']['username']);
   console.log(data);
  } ,
  error : function(){
   alert("AJAX Failed!");
  }
 });
}
</script>
-------  axios 변경중 ------------------------------------------
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 
<script>
function login_app()
{
 axios({
   method: 'post',
   url: 'https://api주소~~~,
   data: {
  identifier: '*** 개인정보보호를 위한 이메일주소 노출방지 ***',
  password: '1234',
   }
~~~~? 구현 방법~
 });
}
</script>

이 질문에 댓글 쓰기 :

답변 4

아... 왜 이걸 이제 발견했는지;; 

ie11에서 jquery ajax No Transport error 에 관한 내용입니다

https://stackoverflow.com/questions/9160123/no-transport-error-w-jquery-ajax-call-in-ie

실제 api url 에서 Access-Control-Allow-Origin을 허용해줘도 

jquery 옵션에 명시해줘야 되는군요 

아래 코드 cors / crossDomain 부분이요

 


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$.support.cors = true;
$(function() {
    $.ajax({
        type: "GET",
        url: 'https://project-team.upbit.com/api/v1/disclosure?region=kr&per_page=5',
        cache: false,
        dataType: 'json',
        crossDomain: true,
        success: function(data) {
            console.log(data);
        },
        error : function(xhr, status, error) {
            console.log(xhr, status, error); // No Transport
        }
    });
});
</script>
</body>
</html>

답변감사힙니다.
그렇게 해도  안되네요.

서버api 개발자분께 물어보니 크로스도메인 전체 허용이라고 하네요..

어느정도 기능은 돌아가는데 문제는
익스 8 ~9 버전에서 동작을 안하네요.

곧 정리해서 다시한번 올리겠습니다.

엑시오스 예제

https://github.com/axios/axios#example

참조하시면 좋을 듯 합니다.

상단에
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
두줄만 선언해 주면 사용가능하던데  혹시 제가 놓친 부분이 있을까요?

정상 동작을 안하는거 같아요..


구현은

<script>

function login_app()
{
axios.post('https://api.주소~~', {
identifier: $("#identifier").val(),
password: $("#password").val(),
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


}

</script>

두 스크립트가 같은겁니다. 

하나만 쓰는 걸로~ 

ie11에서 Promise 오류를 위해 bluebird 추가요 

 


<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/todos/1',
  responseType: 'json'
})
.then(function (response) {
    console.log(response)
});
</script>
</body>
</html>

bluebird 를 인클루드 하니깐  동작을 합니다!!  감사합니다!

한가지..
이건 ajax로 했을때도 같은 문제인데 IE브라우져에서 F12누른후 IE8 로 해놓으면
왜 동작을 안하는거죠?

실제로 IE8 사용자가 동작이 안된다고 해서 axios 로 변경도 했는데...

IE8이면 jquery가 유리하지 않을까요?
axios 브라우저 서포트를 참고해보세요
https://www.npmjs.com/package/axios

jquery brower support
https://jquery.com/browser-support/
If you need to support older browsers like Internet Explorer 6-8, Opera 12.1x or Safari 5.1+, use jQuery 1.12.

결론은  axios 라이브러리는  구버전 IE 를 지원하지 않는다는 결론을 내렸습니다.

ajax 로 처리하는게 맞는데

ajax통신이 안되었던 이유는


IE9 이하의 버전이고  http --- https  통신으로 갈때  이 두가지 상황이

겹칠때  엑세스가 거부되는 현상을 찾았습니다.



IE10 이상은 http -- https 통신이 자유롭습니다.



답변 주신 많은 분들 감사합니다.

+ ajax 통신

http://lsp80.cafe24.com/20.html

 

+axios 통신

http://lsp80.cafe24.com/3.html

 

 

개발자도구에서 IE8로 바꿔서 테스트해보면  둘다 동작을 안합니다..

제이쿼리 1.12 사용했고..

 

 

그리고 제 경험상
ie 개발자도구에 있는 에뮬레이터는
실제 브라우저하고 좀 차이가 있더라고요
완벽히 같은 상황을 재현해 주진 않아요
옛날에 저는 버추얼머신에 윈도우7 ie9 세팅해가지고
보면서 테스트했던 아련한 기억이 있네요 ㅠㅠ
그런데, 현재 그렇게 할 정도로 서포트 해야할 이유가 있을까 싶어요

답변을 작성하시기 전에 로그인 해주세요.
전체 7
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT