jsonpGet，跨域如此簡單

?holyZhengs發表於2018-08-15
JSON跨域

我們經常在專案中遇到跨域問題，比如有時候在做個人專案的時候，我們需要請求第三方的一些資料，比如請求豆瓣公開api的資料，或則qq音樂開放api 的資料等等。但是毫無疑問，在我們的web應用中直接請求這些api將出現跨域問題。所以筆者心血來潮寫了個外掛—— jsonpGet。我們可以通過它，利用jsonp的原理，來向跨域api傳送get請求。下面直入主題，不多廢話。

jsonpGet

簡單易用的jsonp跨域請求外掛，並且它返回一個promise。jsonpGet原始碼

安裝

通過npm進行安裝:

$ npm install jsonp-get
複製程式碼

用法

jsonpGet(url, params?, callback?)

  • url (string) 要請求的地址
  • params (object) 引數，組成url的引數部分如：{a: 1, b: 2} 轉為 ?a=1&b=2
  • callback (string) 前後端約定的欄位名，預設值為callback（通常為此值），用來攜帶回撥。

demo

比如，向豆瓣公開api傳送請求。我們可以在then方法的回撥中處理我們的資料，十分方便。

import jsonpGet from 'jsonp-get'

let url = 'https://api.douban.com/v2/movie/search'
let params = { tag: '喜劇' }

jsonpGet(url, params)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
 

/* Network
*
* Request URL: https://api.douban.com/v2/movie/search?tag=%E5%96%9C%E5%89%A7&callback=myback
* Request Method: GET
* Status Code: 200 OK
*/

/* Console
*
*  {count: 20, start: 0, total: 200, subjects: Array(20), title: "帶有標籤 "喜劇" 的條目"}
*/
複製程式碼

Github: jsonpGet專案 有什麼問題，歡迎提 issues

相關文章