封装ajax方法:cb回调,promise,async/await

1.使用回调

function getUrls(url,data,cb) {
    $.ajax({
        url: url,
        type: "get",
        data: data,
        success: function(res) {
            console.log('cb回调传入方法获取值', res)
            cb(res)
        },

    });
}
getUrls('这里是接口地址','这里是需要的参数',function(res) {
     console.log(res)
})

2.使用promise

function getUrls2(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            type: "get",
            data: {},
            success: function(res) {
                resolve(res)
            },
            error: function(error) {
                reject(error)
            }
        });
    });
}
getUrls2('这是接口地址').then(function(value) {
       console.log('promise用法', value); // success1
})
.catch(e => console.log('promise失败', e));
//resolve是成功的返回 then是调用
//reject是失败的返回 catch是调用(这里使用=>是ES6语法,正常使用的是时候请同一语法)

3.async/await

// async/await
function getUrls3(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            type: "get",
            data: {},
            success: function(res) {
                resolve(res)
            },
            error: function(error) {
                reject(error)
            }

        });
    });
}
let aaa = async() => {
     let bbb = await ceshi666(urlTop + '/portal/news')
     return bbb
}

aaa().then(res => {
     console.log('这里输出async/await结果', res)
})

4.promise同步执行方法

let ceshi = (resolve,reject)=>{
        console.log("这个是ceshi");
        resolve()//方法返回正确结果
        reject()//方法返回错误结果
    }
    let p1 = new Promise(ceshi);
    p1.then(()=>{
        console.log("then-1")
    }).then(()=>{
        console.log("then-2")
    }).then(()=>{
        console.log("then-3")
    }).catch(()=>{
        console.log("catch-1")
    })

猜你喜欢

转载自blog.csdn.net/qq_35181466/article/details/109380019