Vue中使用axios的完整指南

一、axios在vue中的使用慕課筆記

Axios 是一個基於 Promise 的 HTTP 庫，可用於瀏覽器和 Node.js，它是一種簡單，易用且兼容性好的發起HTTP請求的方案。在Vue中使用Axios，可以輕鬆地發起請求，並且可以方便地將返回的數據渲染到頁面上。

在Vue項目中使用Axios需要先進行安裝，打開終端輸入：

npm install axios --save

安裝成功之後，我們可以在Vue組件中引入Axios：

import axios from 'axios'

我們可以通過Axios創建一個 HTTP 請求的實例，該實例可以通過設置全局參數，如請求頭部，超時時間等等，以便我們在項目中統一處理這些參數。例如：

// 創建axios實例
const service = axios.create({
  baseURL: 'https://api.example.com', // api 的 base_url
  timeout: 5000, // 請求超時時間
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

二、在vue中怎麼使用axios

使用Axios時，我們通常在Vue組件的 methods 生命周期中進行調用，這樣我們可以在頁面上發送HTTP請求並接收返回數據。例如：

methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => { console.log(response) })
      .catch(error => { console.log(error) })
  }
}

在上面的方法中，我們使用get方法請求/api/data 這個URL，然後使用.then捕獲成功響應，並使用.catch捕獲錯誤響應。通過這種方式，我們可以方便地在Vue中使用Axios來發起HTTP請求，並處理返回的數據。

三、axios在vue中的使用選取

1.發送GET請求

使用Axios發送GET請求時，我們可以通過傳遞參數來指定請求的URL，例如：

axios.get('/api/data', { params: { id: 1 } })
  .then(response => { console.log(response) })
  .catch(error => { console.log(error) })

在上面的示例中，我們通過params傳遞了一個名為 id 的參數，該參數的值為1。Axios會將參數自動編碼，並將其添加到請求的URL後面。

2.發送POST請求

使用Axios發送POST請求時，我們可以通過傳遞data參數來設置請求的數據，例如：

axios.post('/api/create', { 
  name: 'Tom',
  age: 18 
})
.then(response => { console.log(response) })
.catch(error => { console.log(error) })

在上面的示例中，我們通過傳遞一個對象作為第二個參數，將數據發送到了服務器，服務器會將該數據解析並進行操作。

3.設置請求頭

我們可以通過Axios設置HTTP請求頭，這在某些時候是非常有用的。例如：

axios({
  method: 'get',
  url: '/api/data',
  headers: {'X-Requested-With': 'XMLHttpRequest'}
})
  .then(response => { console.log(response) })
  .catch(error => { console.log(error) })

在上面的示例中，我們在請求頭中指定了一個 X-Requested-With 屬性，以便服務器了解請求是由 Ajax 發送的。

4.設置請求超時時間

我們可以通過設置Axios實例的timeout屬性來指定請求的超時時間。例如：

// 創建axios實例
const service = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000 // 請求超時時間
})

在上面的示例中，我們將timeout屬性設為5000毫秒，表示請求如果超過5秒還沒有響應，則認為請求超時。

5.使用攔截器

Axios提供了攔截器的功能，攔截器可以在請求發送之前和響應之後對數據進行處理。例如：

//請求攔截器
axios.interceptors.request.use(config => {
  //進行請求前處理
  return config
}, error => {
  //對請求錯誤處理
  return Promise.reject(error)
})

//響應攔截器
axios.interceptors.response.use(response => {
  //處理響應數據
  return response
}, error => {
  //對響應錯誤處理
  return Promise.reject(error)
})

在上面的示例中，我們使用了請求攔截器和響應攔截器來處理請求和響應，這樣我們可以方便地對請求和響應進行統一的處理。

總結

本文主要介紹了在Vue中使用Axios的使用方法。我們可以通過Axios方便地發起HTTP請求，並處理返回的數據。通過設置Axios實例的全局參數，我們可以統一處理請求頭，超時時間等等。此外，Axios還提供了攔截器的功能，以便我們處理請求和響應。希望這篇文章可以幫助你更好地使用Vue和Axios進行開發。