Vue fetch詳解：用fetch進行網路請求

一、fetch是什麼？

在Vuejs中，我們經常會需要通過網路請求來獲取數據。fetch是一個由JavaScript原生提供的介面，可以實現網路請求。它基於Promise設計，可與Vue.js無縫集成。Fetch有很多優點，例如請求Cookie的支持、更簡潔的API等。

二、Vue fetch的使用方法

在Vue.js中使用Fetch十分簡單，只需要傳遞相應的URL、Headers和Body等參數即可。每次使用Fetch都會返回一個實現了Promise的Response對象，我們可以通過調用它提供的方法來處理請求結果。

1. GET請求

下面是一個使用Vue Fetch進行GET請求的例子：

fetch('https://api.example.com/data')
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.error(error);
});

首先，我們調用fetch方法並傳遞需要請求的URL。fetch將會返回一個Promise，並執行這個Promise。我們在該Promise內部，通過調用response.json()方法來解析響應的JSON信息。最後，我們把得到的數據列印到控制台中。

2. POST請求

下面是一個使用Vue Fetch進行POST請求的例子：

fetch('https://api.example.com/createUser', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  })
}).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(error) {
  console.error(error);
});

我們使用fetch方法並傳遞請求的URL，同時我們還需要傳遞一個配置對象，其中包含了請求的方法、Header和Body等信息。我們這裡使用JSON.stringify方法把JavaScript對象轉換為JSON對象。最後，我們調用response.json()方法處理請求結果，並把結果列印到控制台中。

三、Vue fetch的常見問題和解決方法

1. CORS

CORS(Cross-Origin Resource Sharing)是一個Web瀏覽器安全機制。它的目的是讓瀏覽器能夠安全地將跨不同域名的請求發送給伺服器。如果你的Vue fetch請求面臨CORS問題，可以通過在伺服器端添加一些Header來解決問題，例如添加以下Header：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE
Access-Control-Allow-Headers: Content-Type

2. 受限數據類型

瀏覽器通常會限制fetch跨域請求的數據類型，比如File類型或Blob類型的數據。如果你需要發送這些類型的數據，可以使用XMLHttpRequest對象進行請求，同時也需要添加上相應的Header信息。

3. 請求超時

在某些情況下，你的請求可能會因為網路之類的原因而無限期地掛起。如果你需要設置請求超時，可以使用AbortController對象進行控制，例如：

const controller = new AbortController();

setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/data', { signal: controller.signal })
.then(function(response) {
  return response.json();
})
.then(function(data) {
  console.log(data);
})
.catch(function(error) {
  console.error(error);
});

我們在setTimeout中設置請求的最大等待時間5秒鐘，當時間到期時，abort方法會自動停止請求。同時，我們在fetch方法中傳遞了一個controller.signal參數，這樣當我們調用abort方法時，請求會自動被停止。

四、總結

Vue Fetch是一個非常方便的網路請求庫。它可以支持CORS和Cookie等安全機制，還提供了一些簡潔的API。另外，在使用Vue Fetch時需要注意CORS、受限數據類型和請求超時等問題。