进阶-ajax

Ajax代表"异步JavaScript和XML"（Asynchronous JavaScript and XML）的缩写。

它是一种用于在不重新加载整个网页的情况下从服务器异步获取数据的技术

Axios是一个现代的JavaScript库，用于执行HTTP请求，它是基于Promise的，使得在浏览器和Node.js中进行HTTP通信变得更加简单和方便

AJAX (Asynchronous JavaScript and XML)

AJAX 是一种技术，它允许 web 页面在不重新加载整个页面的情况下，与服务器进行数据交换和更新部分网页内容。这种技术的核心是 XMLHttpRequest 对象，它是 JavaScript 的一部分，用于在浏览器和服务器之间异步交换数据。

AJAX 的异步性质意味着当你发出一个请求（例如，从服务器获取数据）时，你不需要等待这个请求完成就可以继续执行其他代码。一旦请求完成并且接收到响应，AJAX 会自动更新网页的相关部分，而不需要重新加载整个页面。

发送GET请求

获取资源，例如请求一个API来获取用户数据。

?

1 2 3 4 5 6 7 8 9

axios.get('https://api.example.com/users')   .then(function (response) {     // 处理成功情况     console.log(response.data);   })   .catch(function (error) {     // 处理错误情况     console.log(error);   });

　　

发送POST请求

向服务器发送数据，例如创建一个新的用户记录。

?

1 2 3 4 5 6 7 8 9 10

axios.post('https://api.example.com/users', {     firstName: 'Foo',     lastName: 'Bar'   })   .then(function (response) {     console.log(response);   })   .catch(function (error) {     console.log(error);   });

　　

使用async/await

如果你使用的是ES2017或更高版本，可以利用async/await来简化异步代码。

?

1 2 3 4 5 6 7 8

async function getUser() {   try {     const response = await axios.get('https://api.example.com/user');     console.log(response.data);   } catch (error) {     console.error(error);   } }

　　

demo

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<script setup> import {ref} from 'vue' import {useRouter} from 'vue-router' import {ElMessage} from 'element-plus'; import axios from "axios";   const username = ref('') const password = ref('') const router = useRouter()   function Login() {   axios.post('http://127.0.0.1:8080/login', {     username: username.value,     password: password.value   }).then(response => {         // 前端代码中的这个if语句检查后端返回的JSON对象中的success属性是否为true。如果是，那么认为登录成功，接着执行登录成功后的操作（如消息提示和路由跳转）。如果不是或者success属性不存在，那么会执行else语句块中的代码，通常是显示一个错误消息给用户。         if (response.data.message === '登录成功') {           // ElMessage('true')           router.push({path: '/base'}); // 导航到 Home 页面         } else {           ElMessage.error('登录失败，请检查用户名和密码')         }       }   ).catch(err => {         // 处理错误情况，显示与实际错误相关的信息         console.error('登录失败', err);         ElMessage.error('登录失败，11请稍后再试')       }   ) } <br>下面的是我当年学习的时候瞎写的 const Register = async () => {   try {     // const response = await axios.post('http://localhost:/register', {     //   username: username.value,     //   password: password.value     // });       const fakeResponse = {       success: true     };       if (fakeResponse.success) {       ElMessage('注册成功')     } else {       ElMessage.error('注册失败，请稍后再试')     }   } catch (error) {     console.error('注册失败', error);     ElMessage.error('注册失败，请稍后再试')   } }; </script>