使用Vue訪問後端API

一、前置準備

在我們開始使用Vue訪問後端API之前，需要先確保有以下幾點準備：

1、已經安裝好Vue框架（這裡假設我們使用Vue2.x版本）

2、已經有後端API可供訪問，並了解其接口文檔

3、已經通過npm等方式安裝了axios庫（用於發送HTTP請求）

二、發送GET請求

為了方便演示，我們假設後端API的接口地址為：http://localhost:8080/api/data

下面是一個簡單的Vue組件，它可以向後端API發送GET請求並將返回的數據展示出來：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代碼中，我們在created生命周期中使用axios.get方法發送GET請求，並將返回的數據保存到組件的dataList屬性中。在組件的模板中，我們使用v-for指令遍歷dataList數組，並將每個數據項展示出來。

三、發送POST請求

除了GET請求外，我們還常常需要發送POST請求，並且需要在請求體中攜帶數據。下面的代碼展示了如何向後端API發送POST請求並在請求體中攜帶JSON數據：

<template>
  <div>
    <form @submit.prevent="submitFormData">
      <div>
        <input type="text" v-model="form.name" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        form: {
          name: '',
        },
      };
    },

    methods: {
      submitFormData() {
        axios.post('http://localhost:8080/api/data', this.form)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
    },
  };
</script>

上面的代碼中，我們定義了一個表單，並在submitFormData方法中使用axios.post方法發送POST請求。請求體中攜帶的數據是Vue組件中的form對象。

四、發送帶參數的請求

有時候，我們需要在URL中攜帶一些查詢參數，例如分頁參數等。下面的代碼展示了如何向後端API發送帶查詢參數的GET請求：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
        pageNum: 1,
        pageSize: 10,
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data', {
        params: {
          page_num: this.pageNum,
          page_size: this.pageSize,
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代碼中，我們使用axios.get方法向後端API發送GET請求，並在請求中攜帶pageNum和pageSize兩個查詢參數。

五、發送帶Header的請求

在一些場景下，我們需要在請求頭中攜帶一些數據，例如認證token等。下面的代碼展示了如何在Vue組件中發送帶Header的請求：

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data', {
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
      })
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  };
</script>

上面的代碼中，我們在請求頭中添加了一個Authorization字段，並將其值設為當前用戶的認證token。這樣後端API就可以根據這個token來進行認證和授權。

六、處理請求異常

最後，我們需要學會如何處理請求過程中可能出現的異常。通常，我們會在catch中對異常進行處理，並給用戶一個提示。

<template>
  <div>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }} - {{ item.name }}
      </li>
    </ul>
    <p v-if="error">{{ error.message }}</p>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        dataList: [],
        error: null,
      };
    },

    created() {
      axios.get('http://localhost:8080/api/data')
        .then(response => {
          this.dataList = response.data;
        })
        .catch(error => {
          this.error = error;
        });
    },
  };
</script>

上面的代碼中，我們在組件的data中添加了一個error屬性，用於保存異常對象。在模板中，我們可以通過v-if指令來根據異常對象的存在與否展示不同的內容。