Vue3数据交互axios

原创

已于 2025-08-10 12:02:33 修改 · 1k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#交互 #html #ajax

于 2025-08-09 01:52:36 首次发布

1、预讲知识-promise

1.1 普通函数和回调函数

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

<script>
    let fun1 = () =>{
     
     
        console.log("fun1 invoked")
    }
    // 调用函数
    fun1()
    // 函数执行完毕,继续执行后续代码
    console.log("other code processon")
</script>

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

<script>
    // 设置一个2000毫秒后会执行一次的定时任务
    setTimeout(function (){
     
     
        console.log("setTimeout invoked")
    },2000)
    console.log("other code processon")
</script>

1.2 Promise 简介

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

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

Promise对象有以下两个特点。

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

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

1.3 Promise 基本用法

    <script>
        
       /*  
        1.实例化promise对象,并且执行(类似Java创建线程对象,并且start)
        参数: resolve,reject随意命名,但是一般这么叫!
        参数: resolve,reject分别处理成功和失败的两个函数! 成功resolve(结果)  失败reject(结果)
        参数: 在function中调用这里两个方法,那么promise会处于两个不同的状态
        状态: promise有三个状态
                pending   正在运行
                resolved  内部调用了resolve方法
                rejected  内部调用了reject方法
        参数: 在第二步回调函数中就可以获取对应的结果 
        */
        let promise =new Promise(function(resolve,reject){
     
     
            console.log("promise do some code ... ...")
            //resolve("promise success")   //当异步操作成功时，调用 resolve(结果)，将 Promise 状态改为 resolved；
            reject("promise fail")  //当异步操作失败时，调用 reject(错误信息)，将 Promise 状态改为 rejected。
        })
        console.log('other code1111 invoked')
        //2.获取回调函数结果  then在这里会等待promise中的运行结果,但是不会阻塞代码继续运行
        //then 需要传两个回调函数
        //value 是 then 方法第一个回调函数的参数，它的值来自 Promise 执行器中 resolve 函数的调用参数。
        //error 是 then 方法第二个回调函数的参数，它的值来自 Promise 执行器中 reject 函数的调用参数。
        promise.then(
            function(value){
     
     console.log(`promise中执行了resolve:${ 
       value}