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

接口调用方式

• 原生 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 {