从零开始使用Promise封装请求

最近前端小伙伴表示看不懂我封装的api请求，本来想这玩意儿又不常用，而且promise封装没有一定基础确定很难理解，不太想讲。但转念一想，一切讲不清楚，都是因为自身理解不够，真正的掌握，是能够用很简单明了的方式加以阐释的。于是决定试试，便有了这篇文章。

先给出封装的版本

import axios from "axios"
import qs from "qs"
export default (url = "", data = {}, type = "GET", contentType) => {
  return new Promise((resolve, reject) => {
    let requestConfig = {
      method: type,
      url: url,
      headers: {
        "Accept": "application/json",
        "Content-Type": contentType ? contentType : "application/json"
      },
      timeout: 10000
    };

    switch (type.toUpperCase()) {
      case "GET":
        requestConfig.params = data;
        requestConfig.paramsSerializer = params => {
          return qs.stringify(params, { indices: false })
        };
        break;
      case "DELETE":
        requestConfig.params = data;
        break;
      case "POST":
        requestConfig.data = data;
        break;
      case "PUT":
        requestConfig.data = data;
        break;
    }

    if ((type === "POST" || type === "PUT") && contentType !== "multipart/form-data") {
      requestConfig.data = contentType ? qs.stringify(data) : JSON.stringify(data);
    }

    axios(requestConfig).then((resp) => {
      resolve(resp.data);
    }).catch((err) => {
      reject(err);
    })
  });
}

export const prefix = "/v1"
export const userInfo = data => http(`${prefix}/user/info`, data);
export const userAdd = data => http(`${prefix}/user/add`,data,"post");

首先从函数return值说起，如下，外层函数里返回里层函数，里层函数返回一个数值.

// 思考, 怎么取到111？
function demo() {
    return function() {
        return 1111; 
    }
}
console.log(demo())        // ƒ () { return 1111; }
console.log(type demo());  // function
// 很明显了哟，再调一次就行了。也就是第一次调用是拿到里层返回的函数，第二次调用才是执行里层函数

console.log(demo()()) // 111

接下来，说说promise.

// 思考, new 一个promise，并给定返回值，怎么拿到这个值呢？
var a = new Promise((resolve, reject)=> {
    resolve(222);
});
// 基础语法, 就不多说了
a.then(res => {
    console.log(res);   // 222
});

接下来，稍微升华一下，函数里返回promise.

function http() {
    return new Promise((resolve, reject)=> {
        resolve(333);
    });
}
http().then(res => {
    console.log(res);
});
// http()调用后返回的是promise, 所以用.then/.catch回调接着去取值/处理异常

最后，再注意promise里是直接resolve（333），其实呢，promise特性就是一定会有返回值，而且一旦有值了就不会改变。我们完全可以把它换成接口请求，成功了就resolve，失败了就reject。就像下面这样。

function http(url) {
    return new Promise((resolve, reject)=> {
        aixos(url).then(res =>{
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    });
}
http("xxx").then(res => {
    console.log(res);
})

是不是越看越兴奋？如果能全部看懂，恭喜你，基本掌握了。

最后无非就是处理各种请求方式，传参方式，接收方式之类的事，就不多废话了。