vue 에서 사용 하 는 axios fetch 데이터 요청

axios 는 봉 인 된 제3자 라 이브 러 리 입 니 다.
사용 전 도입
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

axios 의 get 방법 예:
axios({
url: 'http://localhost/get.php',
method: 'get',
params: {
a: 1,
b: 2
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})

axios 의 post 방법 예:

<body>
  <div id="app">
    <h3> ---------axios get post---------- </h3>
    <button @click = "axiosGetHandler"> axios-get </button>
    <button @click = "axiosPostHandler"> axios-post </button>
  </div>
</body>
<script>
  /*
    post      
      1.        
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
      2.    URLSearchParams      params  
      3.   params   append      
  */
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  let params = new URLSearchParams()
  // params.append(key,value)
  params.append('a',1)
  params.append('b',2)
  new Vue({
    el: '#app',
    methods: {
      axiosGetHandler(){
      axiosPostHandler(){
        /* post    */
          axios({
            url: 'http://localhost/post.php',
            method: 'post',
            data: params,
            headers: {
              'Content-Type': "application/x-www-form-urlencoded"
            }
          })
          .then(res => {
            console.log( res )
          })
          .catch( error => {
            if( error ){
              throw error
            }
          })
      }
    }
  })
</script>

fetch 원생
ftech 의 get 방법

<body>
  <div id="app">
    <h3> fetch-----------get post --------</h3>
    <button @click = "get"> get </button>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      numobj: {
        a: 1,
        b: 2
      }
    },
    methods: {
      get(){
            fetch('./data.json')
              .then(res=>{
                res.json() //res.text() res.blob()
              })
              .then( data => console.log(data))
              .catch( error => console.log( error ))
      }
  })
</script>

ftech 의 post 방법 예:

<body>
  <div id="app">
    <button @click = "post"> post </button>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      numobj: {
        a: 1,
        b: 2
      }
    },
      post(){
        fetch('http://localhost/post.php',{
          method: 'post',
          headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded' //            
          }),
          body: new URLSearchParams([["a", 1],["b", 2]]).toString()
        })
          .then( res => res.text())
          .then( data => console.log( data ))
          .catch( error => {
            if( error ){
              throw error
            }
          })
      }
    }
  })
</script>

주의 하 다.
post 구덩이 밟 는 길 해결      1. 요청 헤더 통일 설정        axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;       2. URLSearchParams 를 사용 하여 params 대상 을 예화 합 니 다.      3. params 대상 의 append 방법 으로 데이터 공통점 을 추가 합 니 다. 모두 Promise 전단 원생 이 두 가지 데이터 요청 방식 을 제공 합 니 다.
  • ajax
  • fetch 명심: axios fetch post 방법 은 모두 구덩이 가 있 으 니 해결 방법 에 주의해 야 합 니 다.
  • 요청 헤더 설정
  • new URLSearchParams () 를 통 해 데이터 전송
    • UIBezierPath 베셀 호선 상용 방법 노트
    memcache 설치 설정

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage