【前端之Vue3数据交互axios】_vue3 axios 同步-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44666786/article/details/140729541

Vue3数据交互axios

预讲知识介绍
普通函数和回调函数区别演示
Promise 简介
Promise 基本用法
async 和 await 的使用
Axios介绍
Axios 入门案例
Axios get和post方法
Axios 拦截器

预讲知识介绍

学习axios前，先了解什么是promise；因为axios中用到的是Promise的一套解决方案和语法，而promise是解决回调函数处理问题的

普通函数和回调函数区别演示

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

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

如下test.html中代码演示二者区别：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>普通函数和回调函数</title>
    <script>
        function general() {
     
            console.log("普通函数：普通函数是正常调用的函数,一般函数执行完毕后才会继续执行下一行代码")
        }
        //普通函数调用
        general();
        console.log("普通函数代码后的代码")
        console.log("-------------分割线--------------")

        // 设置一个2000毫秒后会执行一次的定时任务
        function callBack() {
     
            setTimeout(function () {
     
                console.log("回调函数:表示未来才会执行的一些功能,后续代码不会等待该函数执行完毕就开始执行了")
            }, 2000)
        }
        //回调函数调用
        callBack();
        console.log("回调函数代码后的代码")
    </script>


</head>

<body>

</body>

</html>

控制台输出结果：

Promise 简介

ES6规定：Promise对象是一个构造函数，用来生成Promise实例。

Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。
从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

（1）Promise 对象代表一个异步操作，有三种状态：

Pending（进行中）、

Resolved（已完成，又称 Fulfilled）、

Rejected（已失败）。

只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise对象的状态改变，只有两种可能：
从Pending变为Resolved
从Pending变为Rejected。
只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

promise.then方法会等promise对象状态发生改变后才会执行
.catch方法是跟在`.then方法后面，用于指定发生错误时的回调函数。
具体参考下述代码

Promise 基本用法

如下promise.html中代码演示：
分别执行图片中resolve()方法、reject()方法、和发生异常代码来演示3种情况：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Promise</title>
</head>
<script>
    /*
    Promise对象有以下两个特点。
    （1）Promise对象代表一个异步操作，有三种状态：
    `Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。
    只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
    这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

    （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。
    Promise对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。
    只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。
    */
    // resolve 函数，在回调函数中如果调用了resolve方法，promise会由pending状态转换为resolved状态
    // reject 函数，在回调函数中如果调用了reject方法，promise会由pending状态转换为rejected状态

    let promise = new Promise(function (resolve, reject) {
     
        console.log("代码顺序1：回调函数promise");
        // resolve("success");
        // reject("fail");
        // throw new Error("发生了异常信息。。。");
    });

    console.log("代码顺序2：不会等promise状态发生改变就会执行：other code1");

    //promise.then方法会等promise对象状态发生改变后才会执行
    promise
        .then(function (result) {
     
            console.log("代码顺