什么是ajax

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

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

使用Ajax，您可以：

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

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

在vue2中使用

当您在Vue 2中使用Ajax时，建议使用axios库来处理HTTP请求，因为它非常流行、易于使用并且具有很好的文档支持。axios是一个基于Promise的HTTP客户端，可在浏览器和Node.js中使用。

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

以下是使用axios进行Ajax请求的一些详细步骤：

安装axios

您可以使用npm或yarn来安装axios：

npm install axios

或者

yarn add axios

在Vue组件中引入axios

在需要使用axios的Vue组件中，使用import语句引入axios：

import axios from 'axios';

发起Ajax请求

使用axios库的get()方法发起GET请求，示例代码如下：

axios.get('https://v2.api-m.com/api/uuid')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

上面的代码将从 https://v2.api-m.com/api/uuid 发起GET请求，并在响应成功时打印响应数据，如果出现错误则打印错误。类似的，您可以使用post()、put()、delete()等方法来发起其他类型的请求。

处理响应数据

在axios的响应对象中，可以通过data属性获取响应数据，示例代码如下：

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log(response.data.title);
  })
  .catch(error => {
    console.log(error);
  });

上面的代码将打印响应数据中的title属性。

处理错误

如果请求失败，则可以通过catch()方法捕获错误并进行处理。在错误处理程序中，通常会打印错误消息或者显示错误提示。

axios.get('https://jsonplaceholder.typicode.com/postssss/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error.message);
  });

上面的代码将在控制台中打印错误消息"Request failed with status code 404"。

需要注意的是，当使用axios时，您需要确保您的后端API服务器配置允许从您的Vue应用程序的源进行跨域请求。

vue3使用ajax发送网络请求

vue3新特性

vue2对比vue3

axios封装token示例

axios封装示例

vue2使用ajax发送网络请求