Vue Promise封装接口get和post

Vue Promise封装接口

因为实际开发的时候要和别人对接口，有时候不仅是和一个java对接口，要和很多人对，这个时候页面在请求数据的时候就比较烦了，如果不对接口做封装的话，后面切换的时候每个页面都要改地址，然后还有就是Promise，我看了我师父的代码。PS：不知道我理解的对不对 改天问下我师父，我觉得我应该对了，下面给出这个配置的全部代码。

Vue.prototype.$http = http;

Vue.prototype.$post = function(url, data) {
  return new Promise((resolve, reject) => {
    http
      .post(url, data)
      .then((res) => {
        if (res.status == 200) {
          resolve(res.data);
        } else {
          ElementUI.Message.error(res.data.msg);
        }
      })
      .catch((err) => {
        // ElementUI.Message.error('网络错误，请重试！')

        reject(err);
      });
  });
};

这个是源代码。

上图是在页面中使用的。
promise是处理异步操作的，只会返回resolve和reject，reject是失败的数据，resolve是成功的数据
第一张图就是请求接口的时候如果成功了，就是.then，那么resolve就传后端的数据，如果.catch，就往reject里传错误的信息，然后在调用的时候，因为Promise本身在原型链中有catch和then，分别对应了resolve和reject。

import Vue from "vue";
import axios from "axios";
import ElementUI from "element-ui";
require("es6-promise").polyfill();

const http = axios.create({
  baseURL: window.BASEPATH,
  headers: {
    "X-Requested-With": "X-Requested-With",
  },
  withCredentials:true,/*允许携带cookie*/
  timeout: process.env.NODE_ENV === "production" ? 100000 : 100000, // 5000
});

// 添加响应拦截器
http.interceptors.response.use( //interceptors 请求拦截的意思  response是响应拦截
  (response) => {
    // 登录失效，跳转登录
    if (response.data.Code === "201") {
      window.location =
        response.data.Data +
        "?returnurl=" +
        encodeURIComponent(encodeURIComponent(window.location));
      return response;
    } else {
      return response;
    }
  },
  (error) => {
    // 对响应错误做点什么
    console.log("response--", error);
    return Promise.reject(error);
  }
);

//封装接口

Vue.prototype.$http = http;

Vue.prototype.$post = function(url, data) {
  return new Promise((resolve, reject) => {
    http
      .post(url, data)
      .then((res) => {
        if (res.status == 200) {
          resolve(res.data);
        } else {
          ElementUI.Message.error(res.data.msg);
        }
      })
      .catch((err) => {
        // ElementUI.Message.error('网络错误，请重试！')
        reject(err);
      });
  });
};

//         reject(err);
//       });
//   });
// };

Vue.prototype.$get = function(url, params = {}) {
  return new Promise((resolve, reject) => {
    http
      .get(url, {
        params,
      })
      .then((res) => {
        if (res.status == 200) {
          resolve(res);
        } else {
          ElementUI.Message.error(res.data.msg);
        }
      })
      .catch((err) => {
        // ElementUI.Message.error('网络错误，请重试！')
        reject(err);
      });
  });
};