封装axios为什么要包一层 Promise

79 阅读1分钟

正常封装的写法

//创建一个 axios实列
Instance = axios.create({
  baseURL: "xxxxx",
 .....
});
//封装axios
function apiAxios({ method, url, params, data }) {
  return new Promise((resolve, reject) => {
    Instance({
      method: method,
      url: url,
      data: data,
      params: params
    })
      .then(res => {
        resolve(res);
      })
      .catch(async error => {
        reject(error);
      });
  });
}


之前不太了解这种写法,明明Instance返回的就是Promise,为什么外面还包一层Promise.

后来工作中遇到了一个问题: 如果请求失败,处理失败,然后在发送另一个请求。但是有一个要求就是 ,将第二次请求的结果当成第一次的结果,进行返回。

直接在api接口也可以解决的


  async function getInfoApi(options) {
        let res;
        try {
          // 正常请求
          res = await apiAxios(options);
        } catch (error) {
          if (error.message === "某种情况") {
            // 处理失败的请求
            res = await apiAxios("其他参数");
          }
          return error
        }
        return res;
      }

但是如果需要给10个请求都 加上 这一段代码就很麻烦

这个时候就需要给 axios封装一层Promise了

举一个例子

//这个是抛出错误的函数
function Instance(params) {
        return new Promise((resolve, reject) => {
          reject("抛出错误");
        });
      }

      new Promise((resolve, reject) => {
        Instance()
          .then((res) => {
          //成功的结果
            resolve(res);
          })
          //这里对抛出的错误进行处理
          .catch((error) => {
            // 某种判断条件
            if (true) {
            //新建的外层的Promise resolve 成功抛出
            //也是成功的结果
              resolve("这个判断的结果");
            }
            //失败的结果
            reject(error);
          });
      }).then((res) => {
      //拿到成功 的结果
        console.log(res);
      });