fetch-jsonp簡介及應用

一、fetch-jsonp的概述

在前端開發中，一個常見的任務是獲取遠程數據，以便在網頁上展示或實現一些功能。為此，XMLHttpRequest是一個常用的API。fetch是ES6中一個新的API，它比XMLHttpRequest使用更簡便，更強大。但是，fetch有一個限制，就是不能跨域訪問，必須要在一個域名下才能使用。這時，我們可以使用一個叫做fetch-jsonp的庫，它可以實現fetch跨域訪問的功能。

二、fetch-jsonp的基本用法

fetch-jsonp的使用方法非常簡單，只需要下載fetch-jsonp.js文件，並在頁面上引入該文件即可。下面是一個使用fetch-jsonp獲取遠程數據的示例：

fetchJsonp('https://example.com/api/data', {
  jsonpCallback: 'callback',
})
.then(function(response) {
  return response.json()
})
.then(function(json) {
  console.log('parsed json', json)
})
.catch(function(ex) {
  console.log('parsing failed', ex)
})

以上代碼會發出一個跨域的JSONP請求，並將返回的數據使用.json()方法解析成JSON對象。在.then()方法裡面，我們可以獲得這個JSON對象，並進行相應的處理。如果出現錯誤，就會調用.catch()方法。

三、fetch-jsonp的高級應用

1. 指定JSONP的回調函數名

默認情況下，fetch-jsonp會自動生成一個回調函數名。但是，如果我們需要指定一個特定的回調函數名，可以在fetchJsonp方法的第二個參數裡面加上jsonpCallback的鍵值對。如下所示：

fetchJsonp('https://example.com/api/data', {
  jsonpCallback: 'myCallback',
})
.then(function(response) {
  return response.json()
})
.then(function(json) {
  console.log('parsed json', json)
})
.catch(function(ex) {
  console.log('parsing failed', ex)
})

2. 設置JSONP請求的超時時間

我們可以設置JSONP請求的超時時間，以防止請求時間過長導致頁面卡死。可以在fetchJsonp方法的第二個參數裡面使用timeout的鍵值對來設置超時時間（單位為毫秒）。如下所示：

fetchJsonp('https://example.com/api/data', {
  jsonpCallback: 'myCallback',
  timeout: 5000,
})
.then(function(response) {
  return response.json()
})
.then(function(json) {
  console.log('parsed json', json)
})
.catch(function(ex) {
  console.log('parsing failed', ex)
})

3. 使用cancelToken取消請求

如果使用原生XMLHttpRequest實現非同步請求，在請求過程中可以取消請求。fetch-jsonp同樣支持取消請求操作，使用方法是在fetchJsonp方法的第二個參數裡面使用cancelToken的鍵值對，並將調用返回的值作為參數傳入fetchJsonp方法。如下所示：

let cancelPromise
let cancelToken = new Promise(function executor(resolve) {
  cancelPromise = resolve
})

fetchJsonp('https://example.com/api/data', {
  jsonpCallback: 'myCallback',
  cancelToken: cancelPromise,
})
.then(function(response) {
  return response.json()
})
.then(function(json) {
  console.log('parsed json', json)
})
.catch(function(ex) {
  if (ex.message === 'canceled') {
    console.log('請求已取消')
  } else {
    console.log('parsing failed', ex)
  }
})

cancelPromise() // 取消請求

四、fetch-jsonp的優缺點

1. 優點

fetch-jsonp的使用非常簡單，可以輕鬆實現fetch跨域訪問，同時也能夠通過靈活的參數設置進行更加高級的應用。fetch-jsonp的性能優越，其比XMLHttpRequest更快並且更簡單易用。

2. 缺點

fetch-jsonp僅限於JSONP類型的跨域訪問，而且JSONP存在一些限制，例如不能使用POST方法、不支持錯誤處理等。此外，fetch-jsonp也可能存在一些安全問題，因此需要謹慎使用。

五、總結

本文對於fetch-jsonp進行了詳細的介紹，包括fetch-jsonp的概述、基本用法、高級應用及優缺點等方面。fetch-jsonp是一款可靠、高效、易用的跨域請求庫，它的出現為前端開發者帶來了極大的便利。