使用Promise封裝簡單Ajax方法__Ajax

一直都很喜歡使用原生的JavaScript，特別是不需要考慮相容性的情境（雖然少得可憐）。可惜ECMAScript並沒有封裝好的Ajax方法（其實也沒什麼必要有），自己動手使用Promise擼一個吧。 GET

function getJSON (url) {    return new Promise( (resolve, reject) => {        var xhr = new XMLHttpRequest()        xhr.open('GET', url, true)        xhr.onreadystatechange = function () {            if (this.readyState === 4) {                if (this.status === 200) {                    resolve(this.responseText, this)                } else {                    var resJson = { code: this.status, response: this.response }                    reject(resJson, this)                }            }        }        xhr.send()    })}

POST

function postJSON(url, data) {    return new Promise( (resolve, reject) => {        var xhr = new XMLHttpRequest()        xhr.open("POST", url, true)        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        xhr.onreadystatechange = function () {            if (this.readyState === 4) {                if (this.status === 200) {                    resolve(JSON.parse(this.responseText), this)                } else {                    var resJson = { code: this.status, response: this.response }                    reject(resJson, this)                }            }        }        xhr.send(JSON.stringify(data))    })}

其實Promise就是一個天然的try…catch

getJSON('/api/v1/xxx')    // => 這裡面是就try.catch( error => {  // dosomething          // => 這裡就是catch到了error，如果處理error以及返還合適的值}).then( value => {  // dosomething          // 這裡就是final})