Promise和ajax配合使用

1、聲明Promise對象的方式。創建Promise對象,根據業務需求判斷執行成功或者失敗,成功調用resolve(),失敗調用reject()

// 方法1
let promise = new Promise ( (resolve, reject) => {
    if ( success ) {
        resolve(res) 
    } else {
        reject(err) 
    }
} )

// 方法2
function promise () {
    return new Promise ( function (resolve, reject) {
        if ( success ) {
            resolve(res)
        } else {
            reject(err)
        }
    } )
}
 promise.then(result=> {
       console.log(result);
     }, error=> {
       console.log(error);
     }
 ).catch(err=>{
      console.log(err);
       })

.then方法是Promise原型鏈上的方法,包含兩個參數方法,分別爲resolved的回調和已失敗rejected的回調

2、原生js寫ajax promise對象

//使用箭頭函數模式   promise+ajax
    const ajaxPromise = (param,callback) => {
        return new Promise((resolve, reject)=>{
            //耗時操作
            var xhr = new XMLHttpRequest();
            xhr.open(param.type || "get", param.url, true);
            xhr.send(param.data || null);
            xhr.onreadystatechange = () => {
                var DONE = 4; // readyState 4 代表已向服務器發送請求
                var OK = 200; // status 200 代表服務器返回成功
                if (xhr.readyState === DONE) {
                    if (xhr.status === OK) {
                        callback(xhr.responseText)
                        //成功
                        resolve(xhr.responseText+'success');
                    } else {
                        //失敗
                        reject();
                    }
                }
            }
        })
    }

https://www.jianshu.com/p/c98eb98bd00c

https://segmentfault.com/a/1190000013322684

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章