Jsonp的使用

Posted 2020-12-14 coder_xyf

Jsonp的使用

对于跨域请求，我们就可以使用 jsonp 来完成，依据script标签没有同源策略的限定，就能使用。

这里，主要是讲封装一个jsonp请求的函数

jsonp包地址(github)，这里面解释了jsonp的使用

安装：

npm install jsonp

使用：

import jsonp from ‘jsonp‘

/**
 * 使用jsonp这个包，需要传递三个参数：
 * JSONP(url,options,fn)
 *  url: 获取数据的详细路由
 *  options: 参数 (可选参数)
 *  fn: 回调函数（是否成功获取数据，回调）
 */

拼接URL地址的函数：

utils.js

//一般来说，我们使用URL：包括一个根路由，query等
//所以，我们就需要拼接一个完整的url

export function connectUrl(data) {
    let url = ‘‘
    for(let k in data) {
        let value = data[k] !== undefined ? data[k] : ‘‘
        url += `&${k}=${encodeURIComponent(value)}`   //使用的es6的模板字符串的用法 ${}
    }
    return url ? url.substring(1) : ‘‘ //这里主要判断data是否为空
}

封装jsonp的请求函数

jsonp.js

import jsonp from ‘jsonp‘
import { connectUrl } from ‘./utils‘

//封装一个jsonp的函数
/**
 *
 * @param url: 根路径
 * @param data: 参数(相当于query)
 * @param options  选项（基本不用）
 * @returns {Promise<unknown>}   放回一个promise对象
 */
export default function getJsonpData(url, data, options) {
    //拼接字符串（根路径 + 参数）,看根路径是否包含 ‘？’
    url += ( url.indexOf(‘?‘) < 0 ? ‘?‘ : ‘&‘ ) + connectUrl(data)

    return new Promise( (resolve, reject) => {
        jsonp(url, options, (err, data) => {
            if(!err) {
                resolve(data)
            } else {
                reject(err)
            }
        })
    })
}