1. 程式人生 > >Promise實現ajax簡單應用

Promise實現ajax簡單應用

Promise是非同步程式設計的一種解決方案。

  比傳統的解決方案——————回撥函式和事件,Promise更合理和更強大。

在ES6規範中,Promise是提供的一個建構函式,可以new Promise()物件

Promise物件代表一個非同步操作,

Promise有三種狀態:

pending(進行中)

fulfilled(已成功)

rejected(已失敗)

Promise建構函式接受一個函式作為引數,該函式的兩個引數分別是resolvereject。它們是兩個函式,由 JavaScript 引擎提供,不用自己部署。

const test = new Promise(function(resolve,reject){
    if(1){
        resolve('改變狀態')   //resolve改變狀態為fulfilled
    }
})

test.then((result)=>{
    console.log(result);    //改變狀態
})

resolve函式的作用是,將Promise物件的狀態從“未完成”變為“成功”(即從 pending 變為 resolved),在非同步操作成功時呼叫,並將非同步操作的結果,作為引數傳遞出去;reject函式的作用是,將Promise物件的狀態從“未完成”變為“失敗”(即從 pending 變為 rejected),在非同步操作失敗時呼叫,並將非同步操作報出的錯誤,作為引數傳遞出去。

下面寫一個Promise實現一個Ajax請求

const getJSON = (url)=>{
    return new Promise((resolve,reject)=>{
        const handleAjax = ()=>{    //定義狀態改變回調函式
            if(this.readyState==4 && this.status==200){
                resolve(this.responseText);
            }else{
                reject(new error(this.statusText))
            }
        }
        const XML = new XMLHttpReauest();
        XML.open('GET',url);
        XML.onreadystatechange = handelAjax ;
        XML.setRequestHeader("Accept", "application/json");
        XML.send(null);
    })
}


getJSON('/login.json').then((json)=>{
    console.log(json)
},(error)=>{
    console.error(error);
})

                                                                                                                                remenber——my deer Miss.fong