vue-26-resource 실현 get,post,jsonp 요청 및 jsonp 원리

문서:https://github.com/pagekit/vue-resource/blob/master/docs/http.md

//     Vue    http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

//    Vue     $http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

vue-resource 는 7 가지 요청 API(REST 스타일)를 제공 합 니 다.

    get(url, [options])
    head(url, [options])
    delete(url, [options])
    jsonp(url, [options])
    post(url, [body], [options])
    put(url, [body], [options])
    patch(url, [body], [options])

resource get,post,jsonp 요청 실현
html

<div id="app">
    <input type="button" value="get  " @click="getInfo">
    <input type="button" value="post  " @click="postInfo">
    <input type="button" value="jsonp  " @click="jsonpInfo">
div>

js

    {
        let vm = new Vue({
            el: '#app',
            data: {
                hello: 'hello'
            },
            methods: {
                getInfo() {//  get  
                    // this.$http.get('/someUrl').then(successCallback,errorCallback)
                    //    get    ，   .then           
                    this.$http.get('cc.html').then(result => {
                        //    result.body              
                        console.log(result);
                    })
                },
                postInfo() {//  post  
                    //     post  ，        ，  ，         
                    //   post        ，{emulateJSON: true}  
                    //                 
                    // post         ：
                    //   1：     URL  
                    //   2：         
                    //   3：   post         application/x-www-form-urlencoded
                    this.$http.post('cc.html', {}, {emulateJSON: true}).then(result => {
                        console.log(result);
                    })
                },
                jsonpInfo(){//  jsonp  
                    this.$http.post('cc.html').then(result=>{
                        console.log(result);
                    })
                }
            }
        });
    }

jsonp 원리
브 라 우 저의 보안 제한 으로 인해 AJAX 접근 프로 토 콜 이 다 르 고 도 메 인 이름 이 다 르 며 포트 번호 가 다른 데이터 인 터 페 이 스 를 허용 하지 않 습 니 다.브 라 우 저 는 이러한 접근 이 안전 하지 않다 고 생각 합 니 다.
동적 으로 script 라벨 을 만 드 는 형식 으로 script 라벨 의 src 속성 을 데이터 인터페이스의 주 소 를 가리 킬 수 있 습 니 다.script 라벨 은 도 메 인 제한 이 없 기 때문에 이러한 데이터 획득 방식 을 JSONP 라 고 합 니 다(주의:JSONP 의 실현 원리 에 따라 JSONP 는 Get 요청 만 지원 합 니 다).
구체 적 인 실현 과정:
4.567917.먼저 클 라 이언 트 에서 리 셋 방법 을 정의 하고 데이터 에 대한 조작 을 미리 정의 합 니 다
4.567917.이 리 셋 방법의 이름 을 URL 로 전송 하 는 형식 으로 서버 의 데이터 인터페이스 에 제출 합 니 다
4.567917.서버 데이터 인 터 페 이 스 는 클 라 이언 트 에 게 보 낼 데 이 터 를 조직 한 다음 에 클 라 이언 트 가 전달 하 는 리 셋 방법 이름 을 가지 고 이 방법 을 호출 하 는 문자열 을 연결 하여 클 라 이언 트 에 게 보 내 서 실행 을 분석 합 니 다

클 라 이언 트 가 서버 에서 돌아 온 문자열 을 받 은 후에 Script 스 크 립 트 로 해석 하고 실행 하면 JSONP 의 데 이 터 를 얻 을 수 있 습 니 다

Node.js 를 통 해 JSONP 의 요청 예 를 수 동 으로 실현 합 니 다

   const http = require('http');
   //      URL        
   const urlModule = require('url');

   const server = http.createServer();
   //         request     ，      
   server.on('request', (req, res) => {
     const url = req.url;

     //         URL  
     var info = urlModule.parse(url, true);

     //       URL     /getjsonp ，      JSONP     
     if (info.pathname === '/getjsonp') {
       //                
       var cbName = info.query.callback;
       //                 
       var data = {
         name: 'zs',
         age: 22,
         gender: ' ',
         hobby: ['  ', '  ', '  ']
       }
       //           ，          ，           ，       ，              ：
       var result = `${cbName}(${JSON.stringify(data)})`;
       //           ，           
       res.end(result);
     } else {
       res.end('404');
     }
   });

   server.listen(3000, () => {
     console.log('server running at http://127.0.0.1:3000');
   });