encapsulation of network requests jsonp

　　First introduced to the principles of jsonp   

　　　　Because the browser same-origin policy restrictions, the different sources of our tradition axios server is not directly used to request data (ignoring agent), and src tag is not affected by the same origin policy, so we need to create dynamic band there src tag allowed to request data, which is jsonp principle at the end of the URL address of a callback function src stitching is used to pass data back to accept the server

 

Display package distal jsonp

1    // function encapsulates a request jsonp 
2    function Query (opt) {
 . 3        the let STR = ""
 . 4        for (the let Key in opt) {
 . 5            STR = + Key + "=" + opt [Key] + "&"
 . 6        }
 . 7        return STR
 . 8    }
 . 9    // set the default name of the callback function 
10    const defaultOptions = {
 . 11        callbackName: "the callback"
 12 is    } 
16    function JSONP (URL, opt, Options = defaultOptions) {
 . 17        // parameter parsing the URL to access opt for the dissemination of the data interface option for the callback function accepts arguments
18 is        return  new new Promise ((Resolve, Reject) => {
 . 19            // ? Is not present at this determination 
20 is            the let url.indexOf index = ( "?" );
 21 is            ! URL index = -1 + = Query (opt)? : "?" + Query (opt);
 22 is            URL URL = + `$ {options.callbackName} = $ {}` options.callbackName;
 23 is            // first create a tag with the src 
24            const scriptDom = document.createElement ( "Script" );
 25            // set its src attribute 
26 is            scriptDom.setAttribute ( "src" , URL);
 27            // create a callback function for receiving data on the window system 
28           window [options.callbackName] = (RES) => {
 29                // in the dynamic parameter received delete this script node and the above process window 
30                Delete window [options.callbackName];
 31 is                document.body.removeChild (scriptDom)
 32                / / has successfully received call Resolve 
33 is                IF (RES) {
 34 is                    Resolve (RES)
 35                } the else {
 36                    Reject ( "server data temporarily not acquired" )
 37                }
 38            }
 39            // dynamically created script tag, the error monitor 
40           scriptDom.addEventListener ( 'error', () => {
 41 is                Delete window [ 'jsonpCallback' ];
 42 is                document.body.removeChild (Script);
 43 is                Reject ( 'server failed to load!' );
 44 is            });
 45            Document. body.append (scriptDom)
 46 is        })
 47    }

 

Called

 1 <script>
 2         // jsonp("http://localhost:7001/api", {
 3         //     user: "zhangsan",
 4         //     age: "18"
 5         // }).then(res=>{
 6         //     console.log(res);
 7         // }).catch(err=>{
 8         //     console.log((err,"失败"))
 9         // })
10 
11 
12         jsonp(" http://localhost:3000/api", {
13             user: "zhangsan",
14             age: "18"
15         }).then(res => {
16             console.log(res);
17         }).catch(err => {
18             console.log((err, "失败"))
19         })
20     </script>

 

 

We use the express and egg backend framework were achieved using two interfaces

express code shows

. 1 const = the require URL ( "URL" )
 2  
. 3 router.get ( "/ API", (REQ, RES, Next) => {
 . 4    // the URL src script tag requests turn into an object 
. 5    const = URL OPJ .parse (req.url, to true ) .query;
 . 6    // and this principle is the callback function to call parameter passing 
. 7    the let {
 . 8      the callback
 . 9    } = OPJ;
 10    // if this proves to be the presence jsonp callback request 
. 11    IF (the callback) {
 12 is      the let resault = the JSON.stringify ({
 13 is        code:. 1 ,
 14        MSG: "Express pass back frame parameter"
 15     });
16     res.send(`${callback}(${resault})`)
17   }
18 })

 

egg frame does not need to be too much trouble can be directly out of the use of middleware

router.js Code 

module.exports = App => { 
    const {Router, Controller} = App; 
    const JSONP = app.jsonp (); 
    router.get ( "/ API" , JSONP, controller.index.api) 

    // Note this not written as 
    // const = {} App JSONP; 
    // router.get ( "/ API", JSONP (), controller.index.api) 
} 

Controller / index codes 

const {Controller} = require ( " egg" ); 

class Index {the extends the Controller 
     API (CTX) { 
        // directly transmitted jsonp body will return callback function which 
        ctx.body = { 
            code: . 11 ,
            type: "egg JSONP request return" 
        } 
    } 
} 

module.exports = Index;