Vue.js 中如何使用 axios 发送 AJAX 请求-JavaScript中文网-JavaScript教程资源分享门户

什么是 AJAX

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。它通过在不重新加载整个页面的情况下，使用 JavaScript 和 XML 实现了在后台与服务器进行数据交互的功能。这样就能够在用户不知情的情况下更新页面，提高了用户的体验。

为什么要使用 axios 发送 AJAX 请求

Vue.js 是一个基于 MVVM 架构的渐进式 JavaScript 框架，它提供了许多现代而强大的功能，如单文件组件、数据绑定、组件化等等。在 Vue.js 应用中，我们经常需要通过 AJAX 请求获取数据并更新页面，这是一个非常重要的功能。而 axios 是一个基于 Promise 的 HTTP 请求库，它可以轻松地集成到 Vue.js 应用中，提供了一种简洁且优雅的方式来发送 AJAX 请求。

如何集成 axios 到 Vue.js 应用中

首先要安装 axios，打开终端并在项目目录中输入以下命令：

npm install axios --save

在 Vue.js 应用中，可以使用 import 将 axios 引入：

import axios from 'axios'

或者通过 script 标签将其直接引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发送 GET 请求

使用 axios 发送 GET 请求非常容易，只需要在组件中调用 axios.get(url) 即可：

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('https://api.github.com/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}

在这个例子中，我们通过访问 GitHub 的 API 来获取用户列表，并将数据保存在组件的 data 属性中。如果请求成功，会在控制台中输出响应数据；否则会打印错误信息。

发送 POST 请求

使用 axios 发送 POST 请求也非常简单，只需要在组件中调用 axios.post(url, data) 即可：

export default {
  data() {
    return {
      user: {
        name: '',
        email: '',
        message: ''
      }
    }
  },
  methods: {
    submitForm() {
      axios.post('https://example.com/api/contact', this.user)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

在这个例子中，我们使用 axios 发送了一条 POST 请求，将表单数据发送到服务器。如果请求成功，会在控制台中输出响应数据；否则会打印错误信息。

axios 请求配置

除了基本的 GET 和 POST 请求外，axios 还提供了丰富的请求配置，包括 headers、params、data、timeout、responseType、withCredentials 等等。这些配置可以在需要时被用来优化和定制请求。

axios.get('/user', {
  headers: {
    'Authorization': 'Bearer ' + token
  },
  params: {
    id: 12345
  }
})

在这个例子中，我们在 GET 请求中添加了请求头和查询参数。

总结

使用 axios 发送 AJAX 请求是 Vue.js 应用中的重要功能之一，它可以帮助我们轻松地获取和处理数据，并且可以通过请求配置来实现定制化的操作。通过学习本文所介绍的内容，相信读者已经对 axios 的基本使用和配置有了比较深入的了解，可以在实际的开发中更加自如地使用 axios。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a89efbadd4f0e0ff1c8707

Vue.js 中如何使用 axios 发送 AJAX 请求