1. 程式人生 > >Promise和ajax配合使用

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