vue中如何使用ajax

Vue 中使用 AJAX

Vue.js 中使用 AJAX 非常簡單，可以使用 axios 函式庫。

安裝Axios

可以透過以下指令安裝Axios：

<code>npm install axios --save</code>

匯入Axios

在Vue元件中導入Axios：

<code class="javascript">import axios from 'axios';</code>

發起AJAX 請求

使用Axios 啟動AJAX 請求，可以使用下列方法：

## get()

：取得資源

post()

：建立資源

put()

：更新資源

• delete()：刪除資源例如，要使用
get()
• 方法取得資源，可以這樣寫：

  <code class="javascript">axios.get('/api/data')
    .then(response => {
      // 请求成功时执行此函数
      console.log(response.data);
    })
    .catch(error => {
      // 请求失败时执行此函数
      console.error(error);
    });</code>

  配置Axios
• 可以透過以下方式設定Axios：#設定預設請求頭：
使用

axios.defaults.headers

物件。

設定預設baseURL：

使用

axios.defaults.baseURL

選項。
• 設定逾時時間：
使用
• axios.defaults.timeout 選項。
• 處理回應

在發起AJAX 請求後，可以使用下列屬性存取回應：

response. data

：回應資料

response.status###：HTTP 狀態碼#########response.headers###：回應頭####### ######錯誤處理#########如果請求失敗，可以使用###catch()### 方法處理錯誤：###

<code class="javascript">axios.get('/api/data')
  .then(response => {
    // 请求成功时执行此函数
    console.log(response.data);
  })
  .catch(error => {
    // 请求失败时执行此函数
    console.error(error.response.data);
  });</code>

以上是vue中如何使用ajax的詳細內容。更多資訊請關注PHP中文網其他相關文章！