网站版权设置,wordpress 下载选择,微信营销怎么做,网站建设代理成本文章目录 前言代码执行顺序的几个关键点接口请求vue与react中的异步vue中的异步react的state修改异步 前言
本文是B站三十的前端课的笔记前端编程训练,异步编程篇
代码执行顺序的几个关键点
我们可以理解为代码就是一行一行#xff0c;一句一句是执行#xff08;定义变量一句一句是执行定义变量方法存在提升情况)如果有复杂表达式表达式从右往左执行赋值方法调用三元等等异步特性代码一行行执行但是我们调用了一个异步操作,JS放入异步队列中等待任务完成并且当前这次执行已经完成,则执行异步部分
接口请求
接口请求是我们日常工作中最常见的异步操作通常接口的请求是时间不定的肯定要花一点时间的。接口请求的异步我们不用考虑什么微任务和宏任务
获取前三用户的积分做一个图表。但是问题在于图表x轴的日期在一个接口。用户列表在一个接口用户积分又是另外一个接口 利用async await一步一步就可以实现但是必须请求完上一个请求才能执行下一步代码会影响性能 我们可不可以让没有依赖的请求同时并发从而优化性能并节省时间呢
script setup
import * as echarts from echartsimport { onMounted} from vue;import axios from axios;
async function getFinnalData() {//请求最近五天的日期const res await axios.get(http://localhost:8000/getDate)const dateList res.data.recentDate;//获取所有用户列表const userRes await axios.get(http://localhost:8000/getUser)const userList userRes.data.userList;//按id排序userList.sort((preuser, nowuser) {return preuser.id - nowuser.id;})//筛选出id前三的userList.splice(3, userList.length - 1);const _seriesArr []for (let i 0; i userList.length; i) {let _userNumberRes await axios.get(http://localhost:8000/getUserNumber?id userList[i].id)let _series {name: _userNumberRes.data.name,data: _userNumberRes.data.recentNumber,type: line,}_seriesArr.push(_series);}//所有数据都到位了构建最终的optionslet option {yAxis: {type: value},tooltip: {},xAxis: {type: category,data: dateList},series: _seriesArr}return option;}
onMounted(() {getFinnalData()})
/script使用Promise.all实现并发效果 优化性能并节省时间
function getFinnalData() {let option {yAxis: {type: value},tooltip: {},xAxis: {type: category,data: []},series: []}//Promise.all,会等数组里两个Promise异步操作都返回了才进入thenPromise.all([axios.get(http://localhost:8000/getDate),axios.get(http://localhost:8000/getUser)]).then((res) {//res[0]-日期接口的返回 res[1]-用户列表接口的返回//日期数据取出来作为x轴option.xAxis.data res[0].data.recentDate//取出用户列表const userList res[1].data.userList//排序userList.sort((preuser, nowuser) {return preuser.id - nowuser.id;})//筛选出id前三的userList.splice(3, userList.length - 1);//Promise.all保证三个接口都请求成功了在进行series的操作Promise.all([axios.get(http://localhost:8000/getUserNumber?id userList[0].id),axios.get(http://localhost:8000/getUserNumber?id userList[1].id),axios.get(http://localhost:8000/getUserNumber?id userList[2].id)]).then((res) {//三个请求都完成进入thenres.forEach((singleUserNumberres) {let _series {name: singleUserNumberres.data.name,data: singleUserNumberres.data.recentNumber,type: line}option.series.push(_series);//执行完上面的85行数据就完整了。let chartDom document.getElementById(container);let myChart echarts.init(chartDom);myChart.setOption(option);})})})
}把一个大数组拆分成10个一组发送给接口如果有失败的则重试试超过三次还没成功则停止发送
script setup
import axios from axios;//循环形成一个100个元素的数组const arr [];for (let i 0; i 100; i) {arr.push(i);}let tryTime 0;async function sendSingle(part) {const res await axios.get(http://localhost:8001/sendData?part part)if (!res.data.success) {tryTime 1;if (tryTime 3) {//重试超过三次还没成功//就中断后续请求return false} else {return await sendSingle(part);}//请求失败的时候进这里} else {//如果成功了我们就把重试次数归0tryTime 0;return true}}async function send() {//每次循环发一组出去for (let j 0; j arr.length; j 10) {const part arr.slice(j, j 10);const res await sendSingle(part);if (!res) {break;}}}send();/script
3请求接口根据接口的返回日期比对本地缓存的日期看有没有过期 决定是从本地读取key还是从接口请求key。然后再拿着key请求下一个接口
script setupimport { ref } from vue;import axios from axios;const keyValue ref();axios.get(http://localhost:8002/getAvailableDate).then(async (res) {if (new Date() - new Date(res.data.date) 0) {//没过期const _key localStorage.getItem(key)keyValue.value _key} else {//已过期const _key await axios.get(http://localhost:8002/getNew)keyValue.value _key.data.key}axios.get(http://localhost:8002/getFinnalDate?key keyValue.value).then((res) {})})/script对身份证输入进行三次验证但是其中同异步验证交杂上一个验证通过才开始下一个不通过就直接报错,前端验证长是否18位-身份证是否占用-前端验证身份证格式是否符合-身份证是否真实
script setupimport axios from axios;const value 112301199402313013;const testArr [(value) {if (value.length 18) {return true} else {return false}},async (value) {//这个写成async或者直接return axios.get()都是可以的const res await axios.get(http://localhost:8003/isExit?value value);return !res.data.data},(value) {const reg /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/return reg.test(value)},async (value) {const res await axios.get(http://localhost:8003/isReal?value value);return res.data.data}]async function test(value) {for (let i 0; i testArr.length; i) {const res await testArr[i](value)if (!res) {alert(验证失败)break;}}}test(value)/scriptvue与react中的异步
vue中的异步
在页面更新和DOM操作时vue中的nextTick有大作用
script setupimport axios from axios;import { nextTick, ref } from vue;const videolist ref([]);// extTick是在DOM更新完成后执行的回调函数。Vue是响应式的当你更新了videolist例如videolist.value res.data.videoListVue会标记这个数据为已改变并且会异步更新DOM。也就是说页面更新不会立即发生而是会在下一个事件循环中进行。所以如果你直接操作DOM如获取视频元素并调用play方法可能会发现这些视频元素还没有更新到页面上。nextTick确保你可以在DOM更新后再执行相关操作。//请求接口-》拿到接口的返回给到videoLsit-》页面根据videoList更新-》更新完成后获取到所有的videodom-》调用play方法function show() {axios.get(http://localhost:8000/videoList).then((res) {// 响应式数据更新 页面不会立即跟新videolist.value res.data.videoList//setTimeout或者nextTick可以立即更新// nextTick(() {// const videoArr document.getElementById(container).getElementsByTagName(video);// for (let i 0; i videoArr.length; i) {// videoArr[i].play();// }// })setTimeout(() {const videoArr document.getElementById(container).getElementsByTagName(video);for (let i 0; i videoArr.length; i) {videoArr[i].play();}})})}/scripttemplatebutton clickshow加载/buttondiv idcontainer classcontainerdiv classvideo v-forvideo in videolisth3{{ video.name }}/h3video :srcvideo.videoSrc muted/video/div/div/templatescript setupimport axios from axios;import { nextTick, ref } from vue;//请求接口-》渲染列表-》判断列表长度-》修改是否显示总长度的控制变量const tagList ref([]);const needShowLength ref(false);axios.get(http://localhost:8000/tagList).then((res) {tagList.value res.data.tagListnextTick(() {const width document.getElementById(container).clientWidth;if (width 800) {needShowLength.value true;} else {needShowLength.value false;}})})/scripttemplatediv idcontainer classcontainerdiv classtag v-foritem in tagList{{ item }}/div/divdiv v-ifneedShowLength总个数:{{ tagList.length }}/div/templatereact的state修改异步
react中修改state数据是异步的不是马上更新的。所以我们可以看这样例子 一般方案useEffact监听数据改变如果可以的话改成用useRef,setTimout不行
function App() {// const [name, setName] useState()// const [id, setId] useState()// const [age, setAge] useState()// useEffect(() {// if (name age id ) {// axios.get(http://localhost:8000/tagList?name${name}age${age}id${id})// }// }, [name, age, id]).const name useRef();const id useRef();const age useRef();return (div classNameApp姓名input classNameinput onChange{(e) {name.current e.target.value}}/input学号input classNameinput onChange{(e) {id.current e.target.value}}/input年龄input classNameinput onChange{(e) {age.current e.target.value}}/inputbutton onClick{() {axios.get(http://localhost:8000/tagList?name${name.current}age${age.current}id${id.current})}}确认/buttonbutton onClick{() {const inputList document.getElementsByClassName(input)for (let i 0; i inputList.length; i) {console.log(i);inputList[i].value }name.current ;id.current ;age.current ;axios.get(http://localhost:8000/tagList?name${name.current}age${age.current}id${id.current})}}重置/button/div);}文章到这里就结束了 谢谢大家
