Vue前端交互模式、Promise用法（回调地狱）

前端交互模式

接口调用方式

• 原生ajax
• 基于jQuery的ajax
• fetch
• axios

URL地址格式

• 传统形式的URL
  格式：schema://host:port/path?query#frahment

  1. schema：协议。例如http、https、ftp等（必需）
  2. host：域名或者IP地址（必需）
  3. port：端口，http默认端口80，可以省略
  4. path：路径，例如/abc/a/b/c（虚拟路径，区分不同资源）
  5. query：查询参数，例如uname=tkrj&age=19
  6. fragment：锚点（哈希Hash），用于定位页面的某个位置

• Restful形式的URL
  与HTTP请求方式相关

  1. GET 查询
  2. POST 添加
  3. PUT 修改
  4. DELETE 删除

Promise用法

异步调用

• 异步效果分析
  1. 定时任务
  2. Ajax
  3. 事件函数
• 多次异步调用的以来分析
  • 多次异步调用的结果顺序不确定
  • 异步调用结果如果存在依赖需要嵌套

Promise概述

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

优点：

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

Promise基本用法

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

var p = new Promise(function(resolve,reject){
     
    //实现异步任务...
    //成功时调用
    resolve();
    //失败时调用
    reject();
});
p.then(function(ret){
     
    //从resolve得到正常结果
},function(ret){
     
    //从reject得到错误信息
});  

基于Promise处理Ajax请求

1. 处理原生Ajax

function queryData(url){
     
    return new Promise(function(resolve,reject){
     
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
     
            if(xhr.readyState!=4) return;
            if(xhr.status == 200){
     
                resolve(xhr.responseText);
            }else{
     
                reject('出错了');
            }
        }
        xhr.open('get',url);
        xhr.send(null);
    });
}
//调用
queryData('http://localhost:3000/data').then(
    function (data) {
     
        console.log(data);
    },
    function (data) {
     
        console.log(data);
    }
)

2. 发送多次ajax请求(解决回调地狱)

queryData('http://localhost:3000/data')
    .then(function (data) {
     
        console.log(data);
        //异常情况可以不处理
        return queryData('http://localhost:3000/data1');
    })
    .then(function (data1) {
     
        console.log(data1);
        return queryData('http://localhost:3000/data2');
    })
    .then(function (data2) {
     
        console.log(data2);
    });

then参数中的函数返回值

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

Promise常用的API

1.实例方法

* p.then()得到异步任务的正确结果
* p.catch()获取异常信息
* p.finally()成功与否都会执行（暂时还不是正式标准）

foo()
    .then(function (data) {
     
        console.log(data);
    })
    .catch(function (data) {
     
        console.log(data);
    })
    .finally(function () {
     
        console.log('finish');
    })

也可以写为:

foo()
    .then(function (data) {
     
        console.log(data);
    },
    function (data) {
     
        console.log(data);
    })
    .finally(function () {
     
        console.log('finish');
    })  

2.对象方法

• Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果

//p1,p2,p3为Promise实例对象任务
Promise.all([p1,p2,p3]).then((result)=>{
     
    console.log(result);
})

• Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果

Promise.race([p1,p2,p3]).then((result)=>{
     
    console.log(result);
})