Jsonp的使用

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)
            }
        })
    })
}