学习记录：在构建vue项目中利用jsonp 模块和Promise对象,封装自己的jsonp函数

安装jsonp 模块

npm install jsonp

引入jsonp函数

import myJsonp from jsonp

export defalut function Jsonp (url ,data , option) // data为传入的参数对象，option就是原jsonp模板的opts

{

  url + = (url.indexOf('?')<0 ? '?': '&') + param(data) //如果传入的url本来就有参数，那么就加&拼接符

  return  new Promise(f(resolve, reject) => {

    myJsonp (url, option, (err , data)=> {

       if(!err) {     //取到数据，err为空

          resolve(data) //取到数据，promise的状态会变成resolve.，将data作为成功回调函数的参数

        }  else {  //失败

          reject(err)

        }

})

    })

·}

//拼接参数函数

function param(data)  {

  let url = ''

  for(var k in data) {

   let value = data[k] !==undefined ? data[k] : ''  //如果data[k】为unfined，那么data[k]设为空字符串

    url+= `&${k} = ${encodeURIComponent(value)}`   //对value进行转义，避免value中包含特殊字符（= 、&），导致url解释出错

  }

return url ? url.substring(1) : ' '  //url不为空，则去掉前面的拼接符号

}

关于调用

Jsonp (url, data , option).then((res)=>{

 //成功回调函数

} ，（err）=>{

//失败回调函数

})

成功

jsonp(url, opts, fn)

• url (String) url to fetch
• opts (Object), optional
  • param (String) name of the query string parameter to specify the callback (defaults to callback) 默认回调函数名
  • timeout (Number) how long after a timeout error is emitted. 0 to disable (defaults to 60000) 默认超时时间
  • prefix (String) prefix for the global callback functions that handle jsonp responses (defaults to __jp)
  • name (String) name of the global callback functions that handle jsonp responses (defaults to prefix + incremented counter)
• fn callback