Vue入门（四）—— 前端交互

最新推荐文章于 2023-03-22 15:04:15 发布

冰之沁泠

最新推荐文章于 2023-03-22 15:04:15 发布

阅读量479

点赞数

分类专栏： Vue 文章标签： vue Promise fetch axios 前端交互

本文链接：https://blog.csdn.net/weixin_43344890/article/details/113838006

版权

本文介绍了Vue中实现前端交互的方法，包括原生ajax、jQuery的ajax、fetch和axios。重点讲解了Promise的概念和基本API，fetch API的HTTP请求和响应格式，axios的基础用法及全局配置，以及如何使用拦截器。此外，还探讨了异步编程中的async和await关键字的应用。

摘要由CSDN通过智能技术生成

接口调用方式

原生 ajax
基于 jQuery 的 ajax
fetch
axios

异步

JavaScript 的执行环境是「单线程」
所谓单线程，是指JS引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务，这个任务可称为主线程
异步模式可以一起执行多个任务
JS中常见的异步调用
1. 定时任何（setTimeout 和 setInterval）
2. ajax
3. 事件函数（回调函数）

promise

主要解决异步深层嵌套的问题
promise 提供了简洁的 API 使得异步操作更加容易

 <script>
        //  1. Promise基本使用
        //  我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：		   
        //  resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

        var p = new Promise(function(resolve, reject) {
    
            //2. 这里用于实现异步任务  setTimeout
            setTimeout(function() {
    
                var flag = true;
                if (flag) {
    
                    //3. 正常情况
                    resolve('hello world!');
                } else {
    
                    //4. 异常情况
                    reject('出错了');
                }
            }, 100);
        });
        //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
        //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
        p.then(function(data) {
    
            // 返回正常情况的数据
            console.log(data)
        }, function(info) {
    
            // 返回异常情况的数据
            console.log(info)
        });
</script>

基于Promise发送Ajax请求

此处直接使用 JQuery 中封装好的方法

 <script src="js/jquery.js"></script>
    <script>
        //   基于Promise发送Ajax请求
        function queryData(url) {
    
            //  #   1.1 创建一个Promise实例
            var p = new Promise(function(resolve, reject) {
    
                $.ajax({
    
                    url: url,
                    success: function(data) {
    
                        // # 1.2 处理正常的情况
                        resolve(data);
                    },
                    error: function(err) {
    
                        // # 1.3 处理异常情况
                        reject('服务器错误');
                    }
                });
            });
            return p;
        }
        // # 注意：  这里需要开启一个服务 
        // # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
        queryData('http://localhost:3000/data')
            .then(function(data) {
    
                console.log(data)
                    // #  1.4 想要继续链式编程下去 需要 return  
                return queryData('http://localhost:3000/data1');
            })
            .then(function(data) {
    
                console.log(data);
                return queryData('http://localhost:3000/data2');
            })
            .then(function(data) {
    
                console.log(data)
            });
    </script>

Promise 基本API

实例方法

.then()

得到异步任务正确的结果

.catch()

获取异常信息

.finally()

成功与否都会执行（不是正式标准）

<script>
        //  Promise常用API-实例方法
        function sendHttp() {
    
            return new Promise(function(resolve, reject) {
    
                setTimeout(function() {
    
                    var flag = true;
                    if (flag) {
    
                        resolve('success');
                    } else {