• Promise


    Promise用来解决异步嵌套问题
    Promise是JS内置的构造函数  参数是一个回调函数 回调函数有两个参数:resolve(表示执行成功的回调) reject(表示执行失败的回调)
    then方法:Promise类原型上的方法 
    then有两个参数 第一个是成功回调resolve 第二个参数表示失败的回调reject
    
    
    promise有三种状态 第一种是pending(等待状态) 
    第二种是fulfilled(成功的状态)
    第三种是rejected(失败的状态)
    
    
        let p = new Promise(function (resolve,reject) {
            window.setTimeout(function () {
    //            resolve('success');  执行成功的回调
                reject();//失败的回调
            }, 1000)
        })
        p.then(function (data) {
            alert(data);
        },function () {
            alert('error');
        })
    then方法的返回值 Promise类的实例,所以可以继续调用then方法
        let p = new Promise(function (resolve,reject) {
            window.setTimeout(function () {
                resolve('success');  //执行成功的回调
    //            reject();//失败的回调
            }, 1000)
        });
        p.then(function (data) {
            alert(data);
    //        return data;//return是个数值,则会把return的值做为参数传给下一个then的成功回调函数
            return new Promise(function (resolve,reject) {//return是个promise对象下个then走哪个回调函数 是由promise的状态决定的
                window.setTimeout(function () {
    //                reject('失败');
                    resolve('成功');
                },1000)
            })
        },function () {
    //        alert('error1');
            throw new Error('error1');//手动抛出异常才会运行第二个then的失败回调 否则都是成功的回调
        }).then(function (data) {
            alert(data)
        },function (data) {
            alert(data)
        })

    格式化提交的json数据

    https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list
    https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info
    https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/add 
    postman:调试接口
     
    处理异步并发的问题 :
     
    Promise.all异步并发问题 异步逻辑都处理完后再做其他事情
        /*Promise.all异步并发问题 异步逻辑都处理完后再做其他事情*/
        let p1 = new Promise(function (resolve,reject) {
            $.ajax({
                url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info',
                type: 'get',
                dataType: 'json',
                success: resolve,
                error: reject
            })
        });
        let p2 = new Promise(function (resolve,reject) {
            $.ajax({
                url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list',
                type: 'get',
                dataType: 'json',
                success: resolve,
                error: reject
            })
        });
        Promise.all([p1, p2]).then(function (res) {
            let [info,list] = res;
            console.log(info, list);
        })
    Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果
      /*Promise.race 有多个异步操作同时进行 以先返回的为这次异步操作的结果*/
        let p1 = new Promise(function (resolve,reject) {
            $.ajax({
                url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/info',
                type: 'get',
                dataType: 'json',
                success: resolve,
                error: reject
            })
        });
        let p2 = new Promise(function (resolve,reject) {
            $.ajax({
                url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list',
                type: 'get',
                dataType: 'json',
                success: resolve,
                error: reject
            })
        });
        //先返回的状态决定是成功状态还是失败状态
        Promise.race([p1, p2]).then(function (res) {
            console.log(res);//先返回的异步的结果
        },function (err) {
            console.log(err);
        })
     
     
     
  • 相关阅读:
    python生成四位随机数
    解决mysql远程连接失败的问题
    python中的sort、sorted排序
    rest_framework之status HTTP状态码
    vim的卸载以及环境的配置小记
    vue项目如何引用jquery
    VSCode 安装Vue 插件
    Element-UI tree 组件 点击后高亮显示的样式修改(背景色)
    webstorm安装vue插件及安装过程出现的问题
    Vue el-date-picker 日期组件的使用
  • 原文地址:https://www.cnblogs.com/Lia-633/p/9844383.html
Copyright © 2020-2023  润新知