从0开始Vue3数据交互之promise详解

最新推荐文章于 2025-04-26 10:29:28 发布

XError＿xiaoyu

最新推荐文章于 2025-04-26 10:29:28 发布

阅读量4.9k

点赞数 55

分类专栏：编程学习专栏 # 前端工程学习文章标签：前端 javascript promise await和async vue.js

本文链接：https://blog.youkuaiyun.com/weixin_72543266/article/details/141198122

版权

3.1.1 没有调用resolve 函数和reject 函数时

3.1.2 调用resolve()函数

3.1.3 调用 reject()函数

2. 传参调用函数

3.1.4 调用resolve("good")函数,并传入参数good

3.1.5 调用reject("no")函数,并传入参数no

前言

本篇是在学习Axios时结合自己的笔记与记录,在学习Axios之前首先需要学习promise语法以及需要了解的知识,只有学习了这些,使用axios才会用起来很顺手,并且能够更加深入的理解和使用

1. 预先须知-普通函数和回调函数

1.1 普通函数:

正常调用的函数,一般函数执行完毕后才会继续执行下一行代码

代码示例:

//普通函数
        function fun1(){
            console.log("fun1 invoked")
        }
        console.log("code1 invoked")
        //函数的调用

        fun1()  //执行完函数才会执行下面代码
        console.log("code2 invoked")

如图所示, 在执行完普通函数里面的代码后,才会继续执行后面的代码

1.2 回调函数:

一些特殊的函数,表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了

代码示例:

function fun1(){
            setTimeout(function (){
                console.log("fun1 invoked") 
            }, 2000);
        }
       
        console.log("code1 invoked")
        fun1()
        console.log("code2 invoked")

如图所示并执行代码时没有等函数执行完后,再执行,而是执行完后,fun1()才执行的

2. Promise 简介

2.1 简介

前端中的异步编程技术，类似Java中的多线程+线程结果回调！

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2.2 特点

Promise对象有以下两个特点,记住下面的几种状态就可以了。

（1）Promise对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。