promise学习

src/modules/page6/IndexPage.vue

@@ -15,8 +15,8 @@ export default {
 // import CanvasStudy from './element/CanvasStudyCopy1.vue';
 // import CanvasStudy from './element/CanvasCurve.vue';
 
-// import SubComponents from './element/AsyncAwait.vue';
-import SubComponents from './element/equipment/IndexPage.vue';
+import SubComponents from './element/AsyncAwait.vue';
+// import SubComponents from './element/equipment/IndexPage.vue';
 </script>
 <template>
   <div class="page6 container-height">

src/modules/page6/config.ts

@@ -526,12 +526,12 @@ export const machineList1 = [
   {
     code: 'Z02',
     state: 'run',
-    color: 'red',
+    color: 'pink',
   },
   {
     code: 'Z03',
     state: 'run',
-    color: 'red',
+    color: 'green',
   },
   {
     code: 'Z04',
@@ -573,4 +573,129 @@ export const machineList1 = [
     state: 'run',
     color: 'red',
   },
+  {
+    code: 'Z012',
+    state: 'run',
+    color: 'red',
+  },
+  {
+    code: 'Z013',
+    state: 'run',
+    color: 'red',
+  },
+];
+
+// 机台列表测试数据2
+export const machineList2 = [
+  {
+    code: 'B01',
+    state: 'run',
+    color: 'pink',
+  },
+  {
+    code: 'B02',
+    state: 'run',
+    color: 'pink',
+  },
+  {
+    code: 'B03',
+    state: 'run',
+    color: 'pink',
+  },
+  {
+    code: 'B04',
+    state: 'run',
+    color: 'pink',
+  },
+  {
+    code: 'B05',
+    state: 'run',
+    color: 'pink',
+  },
+  // {
+  //   code: 'B06',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B07',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B08',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B09',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B010',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B011',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // // 分割
+  // {
+  //   code: 'B012',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B013',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B014',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B015',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B016',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B017',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B018',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B019',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B020',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B021',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
+  // {
+  //   code: 'B022',
+  //   state: 'run',
+  //   color: 'pink',
+  // },
 ];

src/modules/page6/element/AsyncAwait.vue

+<!-- eslint-disable @typescript-eslint/no-unused-vars -->
 <!--
  * async await return
   -->
@@ -9,12 +10,12 @@ const msg = ref('');
 const requestMsg = ref('');
 
 onMounted(() => {
-  fun();
+  fun1();
 });
 function getMag(name: any) {
   return `Hello, my name is ${name}.`;
 }
-function fun() {
+function fun1() {
   const name = '张三';
   const msg = getMag(name);
   console.log(msg); // Hello, my name is 张三.
@@ -61,22 +62,64 @@ function heavyLoad() {
 }
 
 function fetchApi() {
-  const fetchPromise = fetch(
-    'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
+  fn().then(
+    function (data) {
+      console.log('resolve回调', data);
+      // console.log(somedata); // somedata未定义
+    },
+    function (error) {
+      console.log('reject回调', error);
+    }
   );
+}
 
-  console.log(fetchPromise);
-
-  fetchPromise.then((response) => {
-    console.log(`已收到响应：${response.status}`);
+function fn() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      // Math.random 生成0~1的随机数
+      // Math.ceil 向上取整
+      let num = Math.ceil(Math.random() * 10); // 生成1~10的随机整数
+      if (num <= 5) {
+        resolve(`执行成功，num的值为:${num}`);
+      } else {
+        reject(`执行失败，该数字大于5，num的值为${num}`);
+      }
+    }, 1000);
   });
+}
 
-  console.log('已发送请求……');
+async function fetchProducts() {
+  try {
+    // 在这一行之后，我们的函数将等待 `fetch()` 调用完成
+    // 调用 `fetch()` 将返回一个“响应”或抛出一个错误
+    const response = await fetch(
+      'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP 请求错误：${response.status}`);
+    } else {
+      console.log(response);
+    }
+    // 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
+    // `response.json()` 调用将返回 JSON 对象或抛出一个错误
+    const json = await response.json();
+    console.log(json[0].name);
+  } catch (error) {
+    console.error(`无法获取产品列表：${error}`);
+  }
 }
+// await fetchAPI示例
 </script>
 <template>
   <div class="fit">
     <div class="q-mb-md">async await return</div>
+    <div class="q-mb-md">
+      <a
+        href="https://blog.csdn.net/huchaoyue_/article/details/127686795"
+        target="_blank"
+        >详细内容请查看CSDN</a
+      >
+    </div>
     <div class="content q-gutter-md">
       <q-card class="my-card bg-primary text-white">
         <q-card-section>
@@ -129,6 +172,20 @@ function fetchApi() {
           </div>
         </q-card-section>
       </q-card>
+
+      <q-card class="my-card bg-pink-3 text-white">
+        <q-card-section>
+          <div class="q-mb-md q-gutter-sm">
+            <q-btn
+              no-caps
+              color="white"
+              text-color="pink-3"
+              label="async await"
+              @click="fetchProducts"
+            />
+          </div>
+        </q-card-section>
+      </q-card>
     </div>
   </div>
 </template>

src/modules/page6/element/equipment/EquipmentPage.vue

@@ -15,17 +15,32 @@ const slide = ref('1');
 
 watch(
   () => props.list,
-  () => {
-    listChange();
+  (newVal, oldVal) => {
+    listChange(newVal, oldVal);
   }
 );
 
-function listChange() {
-  console.log('999', props.list);
+function listChange(newVal: any, oldVal: any) {
+  console.log('newVal', newVal.length, 'oldVal', oldVal.length);
+  if (oldVal.length < newVal.length && oldVal.length === 1) {
+    setTimeout(() => {
+      slide.value = '2';
+    }, props.autoplay);
+  }
+  if (newVal.length < Number(slide.value)) {
+    slide.value = '1';
+  }
+}
+
+function clickPoint(value: string) {
+  if (value !== slide.value) {
+    slide.value = value;
+  }
 }
 </script>
 <template>
   <div class="my-carousel-box">
+    <template v-if="props.list.length > 0">
       <div class="content">
         <q-carousel
           v-model="slide"
@@ -33,25 +48,37 @@ function listChange() {
           transition-next="slide-left"
           animated
           infinite
+          :keep-alive="false"
+          :autoplay="props.autoplay"
           class="my-carousel"
         >
-        <q-carousel-slide name="1" class="my-carousel-slide">
-          <div class="item">
-            <div class="item-equipment">
+          <q-carousel-slide
+            :name="String(index + 1)"
+            class="my-carousel-slide"
+            v-for="(item, index) in props.list"
+            :key="index"
+          >
+            <div class="item-carousel-content">
+              <div class="item" v-for="(ele, el_index) in item" :key="el_index">
                 <div class="pic"></div>
-              <div class="item-name">Z01</div>
+                <div class="item-name" :style="{ backgroundColor: ele.color }">
+                  {{ ele.code }}
+                </div>
               </div>
             </div>
-        </q-carousel-slide>
-        <q-carousel-slide name="2" class="my-carousel-slide">
-          <div class="item">888</div>
-        </q-carousel-slide>
-        <q-carousel-slide name="3" class="my-carousel-slide">
-          <div class="item">999</div>
           </q-carousel-slide>
         </q-carousel>
       </div>
-    <div class="points">导航</div>
+      <div class="points">
+        <div
+          class="cursor-pointer"
+          :class="{ active: slide === String(index + 1) }"
+          v-for="(i, index) in props.list"
+          :key="index"
+          @click="clickPoint(String(index + 1))"
+        ></div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -73,7 +100,7 @@ function listChange() {
 .my-carousel-slide {
   padding: 0 !important;
 }
-.item {
+.item-carousel-content {
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -82,14 +109,15 @@ function listChange() {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(2, 1fr);
+  // grid-template-columns: repeat(2, 1fr);
+  // grid-template-rows: repeat(2, 1fr);
+  grid-gap: 5px 5px;
 }
-.item-equipment {
-  border: 1px solid red;
+.item {
   display: flex;
   flex-flow: column nowrap;
   .pic {
     width: 100%;
-    background-color: pink;
     background-image: url('https://img0.baidu.com/it/u=925843206,3288141497&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666803600&t=81f620f962ec6a70673c05d6a55328b5');
     background-size: 100% 100%;
     flex: 1;
@@ -99,7 +127,26 @@ function listChange() {
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: yellow;
   }
 }
+.points {
+  padding: 5px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  align-items: center;
+}
+// 小圆点
+.cursor-pointer {
+  height: 4px;
+  width: 40px;
+  margin-right: 5px;
+  border-radius: 50px;
+  background-color: rgba($color: #3ecdff, $alpha: 0.3);
+  cursor: pointer;
+  transition: all 0.5s;
+}
+.active {
+  background-color: #3ecdff;
+}
 </style>

src/modules/page6/element/equipment/IndexPage.vue

@@ -3,7 +3,7 @@
   -->
 <script setup lang="ts">
 import { reactive, onMounted } from 'vue';
-import { machineList1 } from '../../config';
+import { machineList1, machineList2 } from '../../config';
 import EquipmentPage from './EquipmentPage.vue';
 
 const state = reactive({
@@ -17,18 +17,22 @@ onMounted(() => {
 });
 
 function handleMachineList(data: any) {
-  const step = 3;
+  const step = 10; // 10个一组
   const length = data.length;
   const divisionRes = division(length, step);
-  console.log(divisionRes);
 
   let DATA = JSON.parse(JSON.stringify(data));
   let arr = [] as any;
   for (let i = 0; i < divisionRes.int; i++) {
-    return;
+    const newArr = DATA.slice(i * step, (i + 1) * step);
+    arr.push(newArr);
+  }
+  const last = divisionRes.int * step;
+  if (DATA.slice(last).length > 0) {
+    arr.push(DATA.slice(last));
   }
 
-  return DATA;
+  return arr;
 }
 
 // 取整 取余
@@ -40,9 +44,28 @@ function division(n: number, m: number) {
     int,
   };
 }
+
+function changeData1() {
+  state.list = handleMachineList(machineList2);
+}
+function resetData() {
+  state.list = handleMachineList(machineList1);
+}
+function changeTime1() {
+  state.autoplay = 1000;
+}
+function changeTime2() {
+  state.autoplay = 5000;
+}
 </script>
 <template>
   <div>机台列表</div>
+  <div>
+    <q-btn label="改变数据1" color="primary" @click="changeData1" />
+    <q-btn label="重置" color="primary" @click="resetData" />
+    <q-btn label="改变轮播时间1000" color="orange" @click="changeTime1" />
+    <q-btn label="改变轮播时间5000" color="orange" @click="changeTime2" />
+  </div>
   <div class="my-warp-box">
     <equipment-page :list="state.list" :autoplay="state.autoplay" />
   </div>
@@ -53,6 +76,6 @@ function division(n: number, m: number) {
   width: 500px;
   height: 300px;
   border: 1px solid red;
-  background-color: yellowgreen;
+  background-color: black;
 }
 </style>