vue 第四天 Promise用户；then参数；fetch接口调用方法；axios插件；async/await 用法

1.1 接口调用方式

1. 原生 ajax
2. 基于 jQuery 的ajax
3. fetch
4. axios

这里可以返回一个完整的HTML页面；也可以只返回特定格式的数据，比如json

1.2 URL 地址格式

1. 传统形式的 URL

1. 格式：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. 符合规则的URL
   http://www.itcast.cn
   http://www.itcast.cn/java/web
   http://www.itcast.cn/java/web?flag=1
   http://www.itcast.cn/java/web?flag=1#function

--------------- Promise 用法 ---------------

2.1 异步调用

1. 异步效果分析：
   1.定时任务
   2.Ajax
   3.事件函数
2. 多次异步调用的依赖分析
3. 多次异步调用的结果顺序不确定

     嵌套达到顺序一致
	        $.ajax({
   
            url: 'http://localhost:3000/data',
            success: function(data) {
   
                console.log(data)
                $.ajax({
   
                    url: 'http://localhost:3000/data1',
                    success: function(data) {
   
                        console.log(data)
                        $.ajax({
   
                            url: 'http://localhost:3000/data2',
                            success: function(data) {
   
                                console.log(data)
                            }
                        });
                    }
                });
            }
        });

4. 异步调用结果如果存在依赖需要嵌套

2.2 Promise 概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息

使用 Promise 主要有以下好处：

1. 可以避免多层异步调用嵌套问题(回调地狱)
2. Promise 对象提供了简洁的API，使得控制异步操作更加容易

2.3 Promise 基本用法

1. 实例化 Promise 对象，构造函数中传递函数，该函数中用于处理异步任务
2. resolve 和 reject 两个参数用于处理成功和失败两种情况，并通过 p.then 获取处理结果

        var p = new Promise(function(resolve, reject) {
   
            // 这里用于实现异步任务
            setTimeout(function() {
   
                var flag = false;
                if (flag) {
   
                    // 正常情况
                    resolve('hello'); .//成功时调用 resolve()
                } else {
   
                    // 异常情况
                    reject('出错了');  // 失败时调用 reject()
                }
            }, 100);
        });
        p.then(function(data) {
   
            console.log(data) // 从 resolve 获取正确结果
        }, function(info) {
   
            console.log(info)  // 从 reject 获取错误信息
        });

2.4 基于Promise处理Ajax请求

1. 处理原生Ajax

    function queryData(url) {
   
      var p = new Promise(function(resolve, reject){
   
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
   
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
   
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
   
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

2. 发送多次ajax请求

    发送多个ajax请求并且保证顺序
    
    queryData('http://localhost:3000/data')
      .then(function(data){
   
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
   
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
   
        console.log(data)
      });

2.5 then参数中的函数返回值

1. 返回 Promise 实例对象

返回的该实例对象会调用下一个 then

// An highlighted block
var foo = 'bar';

2. 返回普通值

返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值

    /*
      then参数中的函数返回值
    */
    function queryData(url) {
   
      return new Promise(function(resolve, reject){
   
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
   
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
   
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
   
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }
    queryData('http://localhost:3000/data')
      .then(function(data){
     //返回的该实例对象会调用下一个 then
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
   
        return new Promise(function(resolve, reject){
   
          setTimeout(function(){
   
            resolve(123);
          },1000)
        });
      })
      .then(