zoukankan      html  css  js  c++  java
  • promise用法的实际应用

    我们在实际开发中不可避免的会遇到异步回调问题,比如http请求,读取本地文件等操作。懂得promise原理后或者不懂原理熟悉用法以后如何在开发中应用。

    所有的promise用法都基本差不多,以ajax请求为例。

    var ajax = function(url){
        return new Promise(function(reslove, reject){
            $.ajax({
                url,
                success(data){
                    reslove(data)
                },
                error(err){
                    reject(err);
                }
            })
        })
    };
    //调用ajax函数,传入url,后边写上.then(),.then()里边传入一个函数,这个函数就是reslove
    ajax('api/1.php').then(function(res){
       console.log(res); //我在1.php的文件中返回的数据是1,所以打印1 
    }).catch(()=>{
      console.log('出错了')
    })

    解释:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是reslove和reject。它们是两个函数,由js引擎提供,不用自己部署。

    reslove函数在异步操作成功时调用。reject函数在异步操作失败时调用。

    在上边的代码中,定义一个ajax函数,在函数内部创建一个Promise实例,并return出去,所以在下边调用ajax函数的时候返回了Promise实例。

    .then里边传的参数是在promise请求成功后执行的操作,代替了上边success里边的reslove。

    .catch里边传的参数时在promise请求失败后执行的操作,代替了上边的eror里边的reject。

    如果在这次请求之后还要根据这次请求的结果再去请求数据,那么可以这么写:

    var ajax = function(url){
        return new Promise(function(reslove, reject){
            $.ajax({
                url,
                success(data){
                    reslove(data)
                },
                error(err){
                    reject(err);
                }
            })
        })
    };
    //调用ajax函数,传入url,后边写上.then(),.then()里边传入一个函数,这个函数就是reslove
    ajax('api/1.php').then(function(res){
       console.log(res,"第一次"); //我在1.php的文件中返回的数据是1,所以打印1 
       return ajax('api/2.php')  //在这里用return
    }).then(function(res){
       console.log(res,"第二次"); //我在2.php的文件中返回的数据是2,所以打印2
       return ajax("api/3.php") //在这里用return 
    }).then(function(res){
       console.log(res,"第三次")  //我在3.php的文件中返回的数据是3,所以打印3
    })
  • 相关阅读:
    8.耍杂技的牛 推公式
    内联函数分析
    类的静态成员变量
    操作符重载的概念
    数组本质分析
    动态内存分配
    函数重载分析
    指针本质分析
    单引号和双引号
    内存操作经典问题分析
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/11269810.html
Copyright © 2011-2022 走看看