封裝 jsonp請求數據的方法

什麼是jsonp ： 

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的功能變數名稱（網站）那獲取資料，即跨域讀取數據。

為什麼我們從不同的域（網站）訪問數據需要一個特殊的技術( JSONP )呢？這是因為同源策略。

同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。

瞭解一下jsonp的api : 

封裝jsonp的方法:

//jsonp.js文件

import originJsonp from 'jsonp'       //首先引入jsonp

//第一個參數url為介面地址。
// 第二個參數data為介面地址後面攜帶的參數。因為jsonp不支持直接傳一個對象。所以，我們可以把url和需要傳的參數分開。這樣我們調用這個方法的時候會更加方便。
// 第三個參數opts為對應api上面的opts
export default function jsonp(url, data, opts) {
  //拼接url和需要傳遞的參數data。
  //先判斷url後面有沒有?號，沒有的話後面加？,有的話後面加&
  url += (url.indexOf("?") < 0 ? "?" : "&") + param(data);

  //jsonp的函數我們需要返回一個promise
  return new Promise((resolve, reject) => {
    originJsonp(url, opts, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}


//封裝一個方法，把對象拆解出來拼接到url的後面
export function param(data) {
  let url = "";
  for (var k in data) {
    //如果data[k]為undefined的話，就返回空
    let value = data[k] !== undefined ? data[k] : "";
    //我們使用 encodeURIComponent() 對 URI 進行一下編碼
    url += `&${k}=${encodeURIComponent(value)}`;
  }
  //如果url不為空的話需要刪去第一個&。
  return url ? url.substring(1) : "";
}

使用方法:

//引入剛剛封裝的jsonp方法
import jsonp from './jsonp.js' 

getData() {
        const url = "http://xxxxxxxx";
        const data = {
          name: 'zhangsan',
          age: 12
        };
        const opts = {
          param: 'jsonpCallback'
        };
        jsonp(url, data, opts).then(res => {
          if (res.code === 0) {
            console.log(res.data);
          }
        })
      }