vue3 - 在前端遇到的小问题？？

Question

用的vue3 和element plus，在代码中

const find = async () => {  const res = await axios.put('http://localhost:8080/travel/find/' + id);  categorys.value = res.data.data;  console.log(res.data.data);  const code = res.data.data[0].ydcode;  localStorage.setItem('code', code);  // console.log(categorys.value.id)  // console.log(code.ydcode);};find();console.log(localStorage.getItem('code'));const code1 = localStorage.getItem('code');console.log(code1);const flag = code1 == 1 ? true : false;console.log(flag);

每次code1获取到的值都是上一次存入的值，网上搜说是因为异步的关系，具体应该怎么修改请大佬指导！

Answer 1

这段代码可能存在以下问题：
1、可能抛出错误，但未处理
2、categorys.value可能不是数组
3、code可能不是对象
4、尝试访问code的属性时可能会出错
5、尝试访问code1时可能会出错

const res = await axios.put('http://localhost:8080/travel/find/' + id);try { const data = res.data.data; if (data && data.length > 0) {   categorys.value = data;   console.log(data);   const code = data[0];   localStorage.setItem('code', JSON.stringify(code));   console.log(localStorage.getItem('code'));   const code1 = JSON.parse(localStorage.getItem('code'));   console.log(code1);   const flag = code1.ydcode === '1';   console.log(flag); } else {   console.log('No data found'); }} catch (error) { console.error('Error:', error);}

这段代码假设categorys.value是一个数组，code是一个对象，code1是一个字符串，并且localStorage.getItem('code')返回一个有效的JSON字符串。

Answer 2

问题分析

const find = async () => {  const res = await axios.put('http://localhost:8080/travel/find/' + id);  categorys.value = res.data.data;  console.log(res.data.data);  const code = res.data.data[0].ydcode;  localStorage.setItem('code', code);  // console.log(categorys.value.id)  // console.log(code.ydcode);};find();console.log(localStorage.getItem('code'));const code1 = localStorage.getItem('code');console.log(code1);const flag = code1 == 1 ? true : false;console.log(flag);

问题出现在异步操作上，localStorage.setItem('code', code); 是一个异步操作，而在下面的代码中，你立即尝试获取 localStorage.getItem('code') 的值。由于异步操作的特性，存储操作可能尚未完成，所以你得到的值可能是上一次的值。

为了解决这个问题，你可以将后续的代码逻辑放在 localStorage.setItem 的回调函数中，确保在存储操作完成后再执行后续操作。

解决

const find = async () => {  try {    const res = await axios.put('http://localhost:8080/travel/find/' + id);    categorys.value = res.data.data;    console.log(res.data.data);    const code = res.data.data[0].ydcode;        // 使用Promise确保localStorage.setItem操作完成后再执行后续代码    return new Promise((resolve) => {      localStorage.setItem('code', code);      resolve();    });  } catch (error) {    console.error("Error in find:", error);  }};find().then(() => {  // 在localStorage.setItem完成后执行后续代码  console.log(localStorage.getItem('code'));  const code1 = localStorage.getItem('code');  console.log(code1);  const flag = code1 == 1 ? true : false;  console.log(flag);});

建议

题主对于js的事件循环机制还不够熟悉，建议题主多回顾JS基础内容。

对于js执行引擎，在执行find()后，并没有等find()执行完成。而是立即继续执行下面的console.log的代码（宏任务），而find中的代码（微任务）会被放在主代码执行完后才会执行。

Answer 3

const getCode = async (id) => {  const res = await axios.put('http://localhost:8080/travel/find/' + id);  return res.data.data[0].ydcode;};const init = async () => {  const code = await getCode('xxxx');  localStorage.setItem('code', code);};const main = async () => {  await init();  const code = localStorage.getItem('code');  // do whatever you want};main();

Answer 4

find函数作用域中才是异步等待的 不是当前逻辑都是的异步。
这个函数如果需要改造的话 应该只让函数做一件事。

const find = () => {  return new Promise(async (resolve) => {    let res = await axios.put('http://localhost:8080/travel/find/' + id)    categorys.value = res.data.data;    resolve(res.data.data[0].ydcode)  })}find().then((code: number) => {  //  其他逻辑都不应该在 find 函数内部做  const flag = code === 1;  console.log(flag)})

let flag = (code1 == 1) ? true : false;
直接简写 const flag = code1 === 1;

Answer 5

find().then(() => {    console.log(localStorage.getItem('code')})