## Vue3生命周期方法 ### 组件的生命周期方法 Vue3中有多种生命周期方法,每个组件都有自己的生命周期,是的生命周期基于组件,但是用了vue router 路由切换页面时,组件也会创建和销毁,触发生命周期方法. ```vue onMounted(() => { console.log('组件挂载'); }); onMounted(() => { console.log('组件挂载2'); }); ``` 一个周期可执行多个方法,依次定义即可 ### 路由的生命周期方法 使用 Vue Router,可以通过路由生命周期钩子来控制与 URL 路由相关的行为,与页面的路由生命周期相关,并不直接属于 Vue 组件的生命周期 如**beforeRouteEnter**:当路由进入前调用.比如可以在这里获取数据并执行异步操作. ## 异步请求(js是单线程的) 平时就是同步请求,线性顺序执行 异步请求就是把请求发出去了,就算完事了,他就接着向下执行,也不等那边响应. 原理简单模型: js自己有个任务队列, 空闲时就从中拿内容执行, 异步请求就是让浏览器去发请求, 自己该干嘛干嘛.浏览器收到响应后放到任务队列, 然后js空闲时就到任务队列拿到响应了. (就类似于单核cpu执行一堆进程的运行过程,不断从等待队列取并执行) 各种异步操作其实是浏览器帮其实现的 ### 异步操作语法 async 声明异步函数,返回包装成的Promise对象 await 用于async内部,**等待一个 Promise 对象的解析(resolved)或拒绝(rejected)**, 该async函数执行到await时 ,等待 await的部分执行完才能继续执行, 就是异步中的同步,用async创建异步任务, await部分发送请求并接受,然后继续异步处理响应并返回给主线程 由于await会等待异步操作,可以设定try,catch捕获异步操作的异常 await返回的是promise解包后的结果,即接口响应的数据 ## 异步请求 --- Axios 介绍: Axios 是一个基于 Promise 的 HTTP 客户端，能够方便地进行异步请求。它封装了浏览器的 XMLHttpRequest 或 Node.js 的 http 模块，可以用来发送 HTTP 请求并接收响应。使用 Axios 发起异步请求时，通常配合 async/await 或 Promise 来处理响应和错误。 1. 安装 2. 创建Axios对象,配置请求后端的基本请求参数 ```js import axios from 'axios'; const myAxios = axios.create({ baseURL: 'http://example.com/api', // 你的后端接口基础 URL timeout: 10000, // 请求超时设置（10秒） }); ``` 3. 在组件内需要异步请求后端的地方使用(无论何种方式,都允许传递一个关于请求的config的对象) 1. post请求示例 ```js import axios from 'axios'; async function postData() { try { const data = { title: 'foo', body: 'bar', userId: 1 }; const response = await axios.post('https://jsonplaceholder.typicode.com/posts', data); console.log('请求成功:', response.data); // 输出返回的数据 } catch (error) { console.error('请求出错:', error); // 处理请求错误 } } postData(); ``` 2. get请求示例 ```js import axios from 'axios'; async function fetchData() { try { const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1'); console.log('请求成功:', response.data); // 获取并输出响应数据 } catch (error) { console.error('请求出错:', error); // 处理请求错误 } } fetchData(); ``` 3. 发异步请求并执行一定流程 (then,匿名函数) ```js import axios from 'axios'; // 他直接就是异步请求,async是让你定义函数用的,不是在这 axios.get('https://jsonplaceholder.typicode.com/posts', { headers: { 'Authorization': 'Bearer your_token_here' }, params: { userId: 1 } }) .then(response => { console.log('响应数据:', response.data); }) .catch(error => { console.error('请求出错:', error); }); ``` ​