Vue前后端交互

1. 前后端交互模式

1.1    接口调用方式
        1.原生ajax
        2.基于jQuery的ajax
        3.fetch
        4.axios
    
    1.2 URL地址格式
        1.传统形式的url
            格式 schema://host:port/path?query#fragment
            schema: 协议。例如http，https，ftp等
            host: 域名或者ip地址
            port: 端口，http默认端口80，可以省略
            path: 路径，例如/abc/a/b/c
            query: 查询参数，例如uname=lisi&age=12
            fragment: 锚点（哈希Hash），用于定位页面的某个位置
        2.RestFul形式的URL
            HTTP请求方式
            1.GET 查询
            2.POST 添加
            3.PUT 修改

            4.DELETE 删除

 2. Promise用法

2.1 异步调用
            异步效果分析
                1.定时任务
                2.Ajax
                3.事件函数
            多次异步调用的依赖分析
                1.多次异步调用的结果顺序不确定
                2.异步调用结果如果存在依赖需要嵌套
    
        2.2 Promise概述
            Promise是异步编程的一种解决方案，从语法上讲，Promise是一个
            对象，从它可以获取异步操作的消息。
            
            使用Promise主要有以下好处
            1.可以避免多层异步调用嵌套问题（回调地狱）
            2.Promise对象提供了简洁的API，使得控制异步操作更加容易
            
        2.3     Promise基本用法
            a.实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务；
            b.resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过
              p.then获取处理结果；
            var p = new Promise(function(resolve, reject){
                //成功时调用 resolve()
                //失败时调用 reject()
            });
            p.then(function(result){
                //从resolve得到的正常结果
            },function(result){
                //从reject得到的错误信息
            });

2.4基于Promise处理Ajax请求

        发送多次ajax请求

  queryData(url1).
        then(function(data){
            console.log(data);
            return queryData(url2);
        })
        .then(function(data2){
            console.log(data2);
            return queryData(url3);
        })
        .then(function(data3){
            console.log(data3);
        })

2.5then参数中的函数返回值

 1.返回Promise实例对象
            返回的该实例对象会调用下一个then
        
        2.返回普通值
            返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值