Javascript 进阶 11-6 Promise 与 Ajax

这篇文章要使用 XMLHttpRequest 配合 Promise 进行 ajax 的封装撰写

首先先来看看下方的这範例，我们利用原生的 Web API 针对 这个API服务 进行GET的远端请求。

const url = 'https://jsonplaceholder.typicode.com/todos/1';// 定义Http request(Web API)var req = new XMLHttpRequest();// 定义方法req.open('GET', url);req.onload = function () {    if (req.status === 200) {        // 成功要做的事情        console.log(req.response);    } else {        // 失败要做的事情    }}// 送出请求req.send();

请求完之后会得到这样的资料结构

但是这样每次我要重新发送一个 ajax 的行为就要写这么多的 code 又複杂又费时，还容易出错!

所以这个时候就可以使用 Promise 来包装这个 ajax 的行为!

const url = 'https://jsonplaceholder.typicode.com/todos/1';function get () {    return new Promise((resolve, reject) => {        var req = new XMLHttpRequest();        // 定义方法        req.open('GET', url);        req.onload = function () {            if (req.status === 200) {                // 成功要做的事情                resolve(req.respone);            } else {                // 失败要做的事情                reject(req);            }        }        // 送出请求        req.send();    });}get(url)    .then((res) => {        console.log('成功', res);    })    .catch((err) => {        console.log('失败', err);    })

使用这样的方式，就可以只要传入特定的参数，就可以使用包装好的 ajax。

并且利用Promise.all或是链接的技巧，应用在需要的情境上噜!

以上就是关于如何利用 Promise 包装 ajax 的应用方法。

本篇就是 Javascript 进阶 的最后一篇，希望这个系列对大家有帮助!汪汪~