异步操作，promise、axios

一、异步操作（异步编程）、同步操作

异步操作是指在编程中，某个任务的执行不会立即完成，同时不会阻塞后续代码的执行。在异步操作中，程序可以继续运行，并在异步任务完成时得到通知并处理结果。这与同步操作相对，同步操作会阻塞程序的继续执行直到任务完成。

二、Promise

Promise 是 JavaScript es6 的一个特性，它允许你在异步操作（如网络请求）完成后执行某些代码。它代表了一个将来才会知道结果的操作。Promise 可以处于以下三种状态之一：

• Pending（进行中）：初始状态，既没有成功，也没有失败，也可以叫做等待态。

• Fulfilled（已成功）：操作成功完成。

• Rejected（已失败）：操作失败。

具体步骤

一、

let promise = new Promise((resolve, reject) => {
  // 异步操作
  if (1、0) {
    resolve(value); // 成功时调用  为1的时候表示调用成功
  } else {
    reject(error); // 失败时调用   为0的时候表示失败调用
  }
});

二、使用 Promise 

promise.then(
  value => { /* 处理成功时的内容 */ },
  error => { /* 处理失败时的内容 */ }
);

三、catch()：用于捕获 Promise 中发生的错误。  

promise.catch(
  error => { /*错误处理的内容 */ }
);

成功时用.then,失败处理则用.catch（）

四、使用finally：不管是成功还是失败，都可以使用.finally（） 

promise.finally(() => {
  // 写需要执行的代码内容。
});

总结一下：

 

举个小栗子：

创建一个请求id的函数，该函数返回一个promise，该promise在2秒后解决（成功），返回一个数字（也即指定商品列表的id）（提示：2秒后成功解决，请用setTimeout来模拟）

创建一个请求商品列表的函数，该函数接受一个id，该promise在3秒后解决（成功），返回一个商品列表，商品列表的数据如下

数据：

const data = {
    code:0,
    data:[
  { goodsName: '袜子', price: 20 },
  { goodsName: 'T恤', price: 25 },
  { goodsName: '牛仔裤', price: 50 },
  { goodsName: '连衣裙', price: 70 },
  { goodsName: '运动鞋', price: 80 },
  { goodsName: '夹克', price: 120 },
  { goodsName: '帽子', price: 15 },
  { goodsName: '围巾', price: 30 },
  { goodsName: '手套', price: 18 },
  { goodsName: '裙子', price: 60 },
  { goodsName: '卫衣', price: 90 },
],
}

解题代码：

<template>
</template>

<script setup>
import { ref } from 'vue';
const data = ref('[]')
const getid = () => {
  return new Promise((resolve, project) => {
    setTimeout(() => {
      resolve(2)
    }, 3000)
  })
};

const getlist = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([{
        code: 0,
        data: [
          { goodsName: '袜子', price: 20 },
          { goodsName: 'T恤', price: 25 },
          { goodsName: '牛仔裤', price: 50 },
          { goodsName: '连衣裙', price: 70 },
          { goodsName: '运动鞋', price: 80 },
          { goodsName: '夹克', price: 120 },
          { goodsName: '帽子', price: 15 },
          { goodsName: '围巾', price: 30 },
          { goodsName: '手套', price: 18 },
          { goodsName: '裙子', price: 60 },
          { goodsName: '卫衣', price: 90 },
        ]
      }]);
    }, 3000);
  });
};
//开始使用getid（）函数
getid().then((id) => {
  console.log('成功2' + '+', id);
  return getlist();
}).then((res) => {
  const data = res[0]
  console.log('成功3' + JSON.stringify(data));
})
</script>

<style scoped></style>

原文地址：https://blog.csdn.net/2202_75695913/article/details/144358320

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！