Vue study notes [16] - vue-resource realize get, post, jsonp request

In addition vue-resource, you may be used axiosto third packet to fulfill the request for data

1. Before learning how to initiate a data request? Native, jQuery, need to operate DOM

2. Common data type of request? get post jsonp

3. Test URL address of the requested resource:

• get request Address: http://vue.studyit.io/api/getlunbo

• post request address: http://vue.studyit.io/api/post

• jsonp request address: http://vue.studyit.io/api/jsonp

4. The principle of JSONP

• Due to security restrictions browser, AJAX does not allow access to different protocols, different domain name and port number of different data interface, the browser that this visit unsafe;

• Can be dynamically created script tag form, the src attribute of the script tag, data at the address of the interface, because there is no limit cross-domain script tag, this manner of data acquisition, called JSONP (Note: The implementation principle of JSONP, its , JSONP support only Get request);

• The specific implementation process:

• Define a client callback method, predefined operations on the data;

• Then the name of the callback method by URL parameter passing form, submit the data interface to the server;

• Organize server data interface to send data to the client, the client then took the passed callback method name, a string of splicing a call to this method, sent to the client to parse executed;

• After the string returned by the server to get the client, as the Script script to parse executed, so it can get a JSONP data;

• With that through Node.js, done manually request a JSONP example;

the require HTTP = const ( 'HTTP'); 
    // Import parsing the URL address core module 
    const = urlModule the require ( 'URL'); 

    const = http.createServer Server (); 
    Request // event listener service request, processing each request 
    server.on ( 'request', (REQ, RES) => { 
      const = req.url URL; 

      // parse the URL address of the client request 
      var info = urlModule.parse (URL, to true); 

      // If the request a URL address / getjsonp, it indicates the type of data to be acquired JSONP 
      IF (info.pathname === '/ getjsonp') { 
        // Get the name of the client specified callback function 
        var cbName = info.query.callback; 
        // manually spliced to return to the client the data object 
        var data = { 
          name: 'ZS', 
          Age: 22 is,  
          Gender: 'M',
          Hobby: [ 'eat', 'sleep', 'motion']
        } 
        // splicing illustrating a method call, when calling this method, the data to be transmitted to the client, the sequence into strings, passed as a parameter to the method calls: 
        var = Result cbName} { `$ ($ {the JSON.stringify (Data)})`; 
        // will call a good splicing method, is returned to the client to parse executed 
        res.end (Result); 
      } {the else 
        res.end ( '404'); 
      } 
    }); 

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

5. vue-resource configuration steps:

• Directly in the page, by scriptthe label, the introduction of vue-resourcethe script file;

• Note: the order is quoted: quote from Vuethe script file, and then referenced vue-resourcescript file;

6. Send a get request:

getInfo () {// get the data acquisition mode 
  the this http.get $ ( 'http://127.0.0.1:8899/api/getlunbo') .then (RES => {. 
    the console.log (res.body); 
  } ) 
}

7. Send a post request:

postinfo () { 
   var URL = 'http://127.0.0.1:8899/api/post'; 
   // POST method of three parameters: 
   // Parameter 1: URL address to be requested 
   @ 2 parameters: to send data object 
   @ 3 parameters: encoding type designated post filed file application / X-WWW-form-urlencoded 
   the this $ http.post. (URL, {name: 'ZS'}, {emulateJSON: to true}). the then (RES => { 
     the console.log (res.body); 
   }); 
 }

8. JSONP request the data transmission:

jsonpInfo () {// JSONP data acquired from the server in the form 
   var URL = 'http://127.0.0.1:8899/api/jsonp'; 
   . $ http.jsonp the this (URL) .then (RES => { 
     the console.log (res.body); 
   }); 
 }