码迷,mamicode.com
首页 > 其他好文 > 详细

promise解决回调地狱

时间:2021-01-29 11:58:33      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:rom   object   xmlhttp   ati   类型   ready   case   语法   col   

es6提供了一个语法 promise ,用来解决回调地狱的

语法:
var p = new Promise(function(resolve,reject){
    // 发送ajax
    resolve(res) - 当执行成功的时候调用resolve

    reject() - 当执行失败的时候调用reject
})

promise对象有一个方法叫then - 当调用resolve以后,就会执行then方法

p.then(function(res){

})

p.catch(function(){
    调用了reject就会执行这里
})

 

promise的特点:

1.可以进行链式操作
2.如果在then方法中返回一个promise对象,那么里面这个promise对象的then方法可以跟外面promise对象的then方法形成链式操作
3.多个promise发生了嵌套,所有的promise只需要一个catch

 

封装的promise和ajax函数:

function sendP(obj){
    if(!obj.url){ // 没有传值
        throw new Error(‘地址必填‘)
    }
    if(Object.prototype.toString.call(obj.url) !== ‘[object String]‘){
        throw new Error(‘地址类型不对‘)
    }
    if(!obj.method){ // 没有传入请求方式
        obj.method = ‘get‘;
    }
    if(Object.prototype.toString.call(obj.method) !== ‘[object String]‘){
        throw new Error(‘请求方式类型不对‘)
    }
    if(obj.method.toLowerCase()!==‘get‘ && obj.method.toLowerCase()!==‘post‘){
        throw new Error(‘请求方式只能是get或post‘)
    }
    if(obj.async === undefined){ // 没传
        obj.async = true
    }
    if(Object.prototype.toString.call(obj.async) !== ‘[object Boolean]‘){
        throw new Error(‘是否异步的参数必须是布尔值‘)
    }
    if(obj.data){ // 如果传入了
        var data = ‘‘;
        if(Object.prototype.toString.call(obj.data) === ‘[object String]‘){
            data = obj.data
        }
        else if(Object.prototype.toString.call(obj.data) === ‘[object Object]‘){
            var arr = []
            for(var attr in obj.data){
                arr.push(attr + ‘=‘ + obj.data[attr])
            }
            data = arr.join(‘&‘)
        }
        else{
            throw new Error(‘数据类型不对‘)
        }
        if(obj.method.toLowerCase()==‘get‘){
            obj.url += ‘?‘ + data
        }
    }
    if(!obj.dataType){
        obj.dataType = ‘json‘;
    }
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status>=200 && xhr.status<300){
                    switch(obj.dataType){
                        case ‘json‘:
                            var res = xhr.responseText;
                            res = JSON.parse(res);
                            break;
                        case ‘string‘:
                            var res = xhr.responseText;
                            break;
                        case ‘xml‘:
                            var res = xhr.responseXML;
                            break;
                        default:
                            throw new Error(‘希望返回的数据类型不对‘)
                    }
                    resolve(res)
                }else{
                    reject()
                }
            }
        }
        xhr.open(obj.method,obj.url,obj.async)
        if(data){
            if(obj.method.toLowerCase() === ‘post‘){
                xhr.setRequestHeader(‘content-type‘,‘application/x-www-form-urlencoded‘);
                xhr.send(data)
                return;
            }
        }
        xhr.send()
    })
}

 

 

promise解决回调地狱

标签:rom   object   xmlhttp   ati   类型   ready   case   语法   col   

原文地址:https://www.cnblogs.com/mrxiachongyu/p/14341564.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!