在 Vue 2 中使用 Axios 发起 POST 和 GET 请求

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 node.js，它提供了一种非常方便的方式来发送异步 HTTP 请求。在 Vue 2 应用中，Axios 可以帮助我们轻松地与后端 API 进行通信。本文将介绍如何在 Vue 2 项目中引入 Axios，并使用它来发起 POST 和 GET 请求。

1. 安装 Axios

首先，你需要在你的 Vue 项目中安装 Axios。打开终端，切换到你的项目目录，然后运行以下命令：

npm install axios

或者，如果你使用 yarn 作为包管理器：

yarn add axios

2. 在 Vue 组件中引入 Axios

在你的 Vue 组件中，你可以直接引入 Axios 并使用它。

示例代码

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <button @click="submitData">提交数据</button>
    <div v-if="data">
      {{ data }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error('请求失败:', error);
        });
    },
    submitData() {
      axios.post('https://api.example.com/submit', {
        key: 'value'
      })
      .then(response => {
        console.log('提交成功:', response.data);
      })
      .catch(error => {
        console.error('提交失败:', error);
      });
    }
  }
}
</script>

3. 发起 GET 请求

使用 Axios 发起 GET 请求非常简单。你可以使用 axios.get() 方法，并传递两个参数：URL 和可选的配置对象。

示例代码

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('数据获取成功:', response.data);
  })
  .catch(error => {
    console.error('数据获取失败:', error);
  });

4. 发起 POST 请求

与 GET 请求类似，使用 Axios 发起 POST 请求也很简单。使用 axios.post() 方法，你需要传递三个参数：URL、要发送的数据和一个可选的配置对象。

示例代码

axios.post('https://api.example.com/submit', {
  key: 'value'
})
.then(response => {
  console.log('数据提交成功:', response.data);
})
.catch(error => {
  console.error('数据提交失败:', error);
});

5. 处理请求和响应拦截

Axios 允许你添加请求和响应拦截器，这在处理诸如身份验证令牌、设置默认请求头或统一处理错误时非常有用。

示例代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  config.headers.Authorization = 'Bearer ' + YOUR_TOKEN;
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

6. 错误处理

在 Vue 应用中，错误处理非常重要。你可以在 .catch() 方法中统一处理错误，或者使用 Vue 的全局错误处理机制。

示例代码

axios.get('https://api.example.com/data')
  .then(response => {
    // 处理成功的响应
  })
  .catch(error => {
    // 处理错误
    if (error.response) {
      // 服务器返回了错误状态码
      console.error('错误响应:', error.response.status);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.error('没有响应:', error.request);
    } else {
      // 发送请求时出了点问题
      console.error('错误:', error.message);
    }
  });

结论

Axios 是一个强大的工具，可以帮助你在 Vue 2 应用中轻松地发送 HTTP 请求。通过本文的介绍，你应该能够理解如何在 Vue 组件中使用 Axios 发起 GET 和 POST 请求，以及如何处理请求和响应。记得在实际应用中根据需要添加错误处理和拦截器，以提高应用的健壮性和用户体验。