Promise使用

学习链接：wangdoc.com/es6/promise

产品展示

题目：www.lanqiao.cn/problems/18…

pipeline('动画开始',[fn1, fn2]).then(res => { console.log(res) })

const pipeline = (initialValue, sequence) => {
    let p = Promise.resolve(initialValue);
    for(const fn of sequence){
        p = p.then(fn)
    }
    return p;
};

1. Promise.resolve(initialValue)

• 作用：把 initialValue 包装成一个已完成的 Promise。
• 目的：保证后续的操作都基于 Promise 链，方便统一处理同步和异步的函数。
• 如果 initialValue 本身就是 Promise，则直接返回它；否则包装成已完成的 Promise。

2. p = p.then(fn)

• .then() 方法是 Promise 的核心，它会等待前一个 Promise 结束（resolve），然后执行传入的函数 fn。
• 这里，fn 会自动接收 p resolve 后的值作为参数。
• fn 可以返回普通值，也可以返回 Promise，.then() 会自动处理这些情况，确保下一步函数在前一步完成后执行。
• 把 p 赋值成新的 Promise，实现函数链式调用，保证顺序执行。

3. 返回值 return p

• 返回最终的 Promise 对象。
• 这样调用 pipeline(...).then(...) 就可以拿到整个异步管道完成后的结果。

异步加载远程图片

<template>
  <div>
    <button @click="loadImage">加载图片</button>
    <!-- 加载失败时显示错误信息 -->
    <div v-if="error" style="color: red;">{{ error }}</div>
    <!-- 加载成功后显示图片 -->
    <div v-if="imgSrc">
      <img :src="imgSrc" alt="加载的图片" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const imgSrc = ref('');  // 图片地址，绑定到 <img> 的 src
const error = ref('');   // 错误信息，加载失败时赋值

// 封装的异步加载图片函数，返回 Promise
function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    const image = new Image();

    // 图片加载成功，调用 resolve，传入 image 对象
    image.onload = function() {
      resolve(image);
    };

    // 图片加载失败，调用 reject，传入错误信息
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };

    image.src = url;  // 这一步触发加载，必须保证事件已绑定完毕
  });
}

// 点击按钮调用，执行图片加载逻辑
async function loadImage() {
  error.value = '';  // 清空错误信息
  imgSrc.value = ''; // 清空图片地址
  try {
    const img = await loadImageAsync('https://picsum.photos/200/300'); // 等待图片加载
    imgSrc.value = img.src;  // 加载成功，设置图片地址显示
  } catch (err) {
    error.value = err.message; // 加载失败，显示错误信息
  }
}
</script>

Ajax请求

蓝桥杯真题：www.lanqiao.cn/problems/18…

export const useMessageStore = defineStore("message", () => {
  const messageState = ref([]);
  const MockUrl = "./data.json";

  let getUserMessage = async () => {
    try {
      // 使用 Promise 封装 XMLHttpRequest 请求
      const { data } = await new Promise((resolve, reject) => {
        // 创建 XMLHttpRequest 对象
        const client = new XMLHttpRequest();
        // 设置请求方法和 URL（GET 请求 + 本地 mock 数据）
        client.open("GET", MockUrl, true);
        
        // 监听请求状态变化
        client.onreadystatechange = function () {
          if (client.readyState === 4) {
            if (client.status === 200) {
              resolve(JSON.parse(client.responseText));
            } else {
              reject(new Error(`请求失败：${client.status}`));
            }
          }
        };
        
        // 发送请求
        client.send();
      });

      messageState.value = data;
      console.log("数据加载成功：", data);
    } catch (err) {
      console.error("获取数据出错：", err);
    }
  };

  return {
    messageState,
    getUserMessage,
  };
});