Promise實現ajax簡單應用
阿新 • • 發佈:2018-12-11
Promise是非同步程式設計的一種解決方案。
比傳統的解決方案——————回撥函式和事件,Promise更合理和更強大。
在ES6規範中,Promise是提供的一個建構函式,可以new Promise()物件
Promise
物件代表一個非同步操作,
Promise有三種狀態:
pending
(進行中)
fulfilled
(已成功)
rejected
(已失敗)
Promise
建構函式接受一個函式作為引數,該函式的兩個引數分別是resolve
和reject
。它們是兩個函式,由 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