网络请求之jsonp封装

　　首先介绍下jsonp原理

　　　　浏览器因为同源策略的限制，在不同源的服务器通过我们传统axios是不能直接用来请求数据的(忽略代理),而src标签则不受同源策略的影响，所以我们需要动态的创建带有src的标签让其进行数据的请求，这就是jsonp的原理，在src的URL地址末尾拼接上一个回调函数，用来接受服务器传回来的数据

前端jsonp的封装展示

   //封装一个jsonp请求的函数
   function query(opt) {
       let str = ""
       for (let key in opt) {
           str += key + "=" + opt[key] + "&"
       }
       return str
   }
   //设置默认回调函数的名字
   const defaultOptions = {
       callbackName: "callback"
   }
   function jsonp(url, opt, options = defaultOptions) {
       //参数解析  URL为访问的接口 opt为传播的数据  option 为接受参数的回调函数
       return new Promise((resolve, reject) => {
           //判断下这个？是不是存在
           let index = url.indexOf("?");
           url += index != -1 ? query(opt) : "?" + query(opt);
           url = url + `${options.callbackName}=${options.callbackName}`;
           //首先创造一个标签 带有src的
           const scriptDom = document.createElement("script");
           //设置其src属性
           scriptDom.setAttribute("src", url);
           //在window系统上创建一个回调函数用来接受数据
           window[options.callbackName] = (res) => {
               //在接受到了参数动态删除这个script节点和window上面的方法
               delete window[options.callbackName];
               document.body.removeChild(scriptDom)
               //接受成功后调用resolve
               if (res) {
                   resolve(res)
               } else {
                   reject("服务器暂没有获取到数据")
               }
           }
           //动态创建script标记，错误的监听
           scriptDom.addEventListener('error', () => {
               delete window['jsonpCallback'];
               document.body.removeChild(script);
               reject('服务器加载失败！');
           });
           document.body.append(scriptDom)
       })
   }

调用方式

 <script>
         // jsonp("http://localhost:7001/api", {
         //     user: "zhangsan",
         //     age: "18"
         // }).then(res=>{
         //     console.log(res);
         // }).catch(err=>{
         //     console.log((err,"失败"))
         // })

         jsonp(" http://localhost:3000/api", {
             user: "zhangsan",
             age: "18"
         }).then(res => {
             console.log(res);
         }).catch(err => {
             console.log((err, "失败"))
         })
     </script>

后端我们使用express和egg两款框架分别实现了接口的使用

express的代码展示

 const url = require("url")

 router.get("/api", (req, res, next) => {
   //将script标签的src的URL请求转成对象
   const opj = url.parse(req.url, true).query;
   //然后原理就是调用这个回调函数来进行传参
   let {
     callback
   } = opj;
   //如果这个回调函数存在证明是jsonp请求
   if (callback) {
     let resault = JSON.stringify({
       code: 1,
       msg: "express框架传回去的参数"
     });
     res.send(`${callback}(${resault})`)
   }
 })

egg框架就不需要这么麻烦了 利用中间件可以直接出来

router.js代码
module.exports=app=>{
    const {router,controller}=app;
    const jsonp = app.jsonp();
    router.get("/api",jsonp,controller.index.api)

    //注意不要写成下面这种
    // const {jsonp}=app;
    // router.get("/api",jsonp(),controller.index.api)
}

controller/index   代码
const {Controller}=require("egg");

class Index extends Controller{
     api(ctx){
        //直接利用body返回就会传到jsonp的回调函数里面
        ctx.body={
            code:11,
            type:"egg返回的jsonp请求"
        }
    }
}

module.exports=Index;        

本文GitHup地址  https://github.com/qiang-chen/cross-domain