什么是ajax

Ajax代表“异步JavaScript和XML”，是一种用于创建动态Web内容的技术。 Ajax可以让您在不重新加载整个页面的情况下更新部分页面，从而提高Web应用程序的性能和用户体验。

Ajax使用XMLHttpRequest对象向服务器发送HTTP请求，并在后台异步处理响应。换句话说，当您使用Ajax时，您的Web应用程序可以在不中断用户界面的情况下与服务器进行通信，从而提高Web应用程序的响应速度和性能。

使用Ajax，您可以：

异步加载网页内容，而无需刷新整个页面。
通过JavaScript和DOM实现动态效果和交互。
从服务器获取数据并在Web页面上显示它们。
向服务器发送数据，以便进行处理。

Ajax技术是通过JavaScript实现的，所以您需要具备一定的JavaScript编程知识。此外，由于Ajax涉及异步通信，因此它需要处理异步编程中的一些问题，例如回调函数、Promise等。虽然JavaScript提供了处理异步编程的许多机制，但仍然需要小心编写代码以避免出现错误。

在vue3中使用

在Vue 3中，您可以使用内置的axios库或者fetch API来发起Ajax请求。

使用axios

axios官网中文文档：https://axios-http.com/zh/

安装axios

您可以使用npm或yarn安装axios，如下所示：

npm install axios
# 或者
yarn add axios

引入axios

在您的Vue组件中，您需要引入axios，如下所示：

import axios from 'axios'

发起Ajax请求

您可以使用axios发起GET、POST、PUT、DELETE等类型的请求。以下是发起GET请求的示例：

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

以上代码将从/api/data端点发起GET请求，并在响应成功时打印响应数据，如果出现错误则打印错误。

以下是使用axios发起POST请求的示例：

axios.post('/api/data', {
  firstName: 'John',
  lastName: 'Doe'
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

以上代码将从/api/data端点发起POST请求，并在响应成功时打印响应数据，如果出现错误则打印错误。

使用fetch API

发起Ajax请求

使用fetch API发起GET、POST、PUT、DELETE等类型的请求。以下是发起GET请求的示例：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

以上代码将从/api/data端点发起GET请求，并在响应成功时打印响应JSON数据，如果出现错误则打印错误。

以下是使用fetch API发起POST请求的示例：

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    firstName: 'John',
    lastName: 'Doe'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error))

以上代码将从/api/data端点发起POST请求，并在响应成功时打印响应JSON数据，如果出现错误则打印错误。

需要注意的是，使用fetch API需要手动处理响应，例如使用response.json()或response.text()等方法将响应转换为JSON或文本格式。此外，由于Vue 3使用了新的Composition API，您可能需要在编写Ajax代码时使用ref和reactive等新的特性。

vue2使用ajax发送网络请求

vue3新特性

vue2对比vue3

axios封装token示例

axios封装示例

vue3使用ajax发送网络请求