vue封装接口

1、新建一个api文件夹，再在里面新建一个api 文件，在文件里封装接口
import axios from "axios";
axios.defaults.withCredentials = true;

import Vue from "vue";
import qs from "qs";
// const appserver = "http://192.168.1.116:8888/";               可能需要更换的接口
// const appserver = "http://10.34.106.119:8013/";               可能需要更换的接口
const appserver = "http://192.168.1.97:8013/";                        现在需要用的接口
export function appServer() {
  return appserver;                                                                 //后面导入导出等直接需要用地址的要用
}

//get请求
export function commonGet(urls, params, callback) {
  let appUrl = appserver + urls;
  axios
    .get(appUrl, {
      params
    })
    .then(res => {
      callback(res.data);
    })
    .catch(res => {
      try {
        if (res.response.status == 401) {
          Vue.prototype.$message({
            message: "登录已过期，请重新登录！",
            type: "error"
          });
          Session.remove("token");
          Session.remove("wsUrl");
          Vue.prototype.$router.push({
            path: "/login"
          });
        } else if (res.response.status == 504) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else if (res.response.status == 404) {
          Vue.prototype.$message({
            message: "接口异常！",
            type: "error"
          });
        } else if (res.response.status == 500) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        }
      } catch (e) {}
    });
}

//post请求
export function commonPost(urls, params, callback) {
  let appUrl = appserver + urls;
  axios
    .post(appUrl, JSON.stringify(params), {
      headers: {
        "Content-Type": "application/json;charset=utf-8"
      }
    })
    .then(res => {
      callback(res.data);
    })
    .catch(res => {
      try {
        if (res.response.status == 401) {
          Vue.prototype.$message({
            message: "登录已过期，请重新登录！",
            type: "error"
          });
          Session.remove("token");
          Session.remove("wsUrl");
          Vue.prototype.$router.push({
            path: "/login"
          });
        } else if (res.response.status == 504) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else if (res.response.status == 404) {
          Vue.prototype.$message({
            message: "接口异常！",
            type: "error"
          });
        } else if (res.response.status == 500) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        }
      } catch (e) {}
    });
}
//post请求
export function commonPost2(urls, params, callback) {
  let appUrl = appserver + urls;
  axios
    .post(appUrl, qs.stringify(params))
    .then(res => {
      callback(res.data);
    })
    .catch(res => {
      try {
        if (res.response.status == 401) {
          Vue.prototype.$message({
            message: "登录已过期，请重新登录！",
            type: "error"
          });
          Session.remove("token");
          Session.remove("wsUrl");
          Vue.prototype.$router.push({
            path: "/login"
          });
        } else if (res.response.status == 504) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else if (res.response.status == 404) {
          Vue.prototype.$message({
            message: "接口异常！",
            type: "error"
          });
        } else if (res.response.status == 500) {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        } else {
          Vue.prototype.$message({
            message: "服务器异常！",
            type: "error"
          });
        }
      } catch (e) {}
    });
}
posted @ 2019-12-10 09:43  看到我的div了吗？  阅读(301)  评论(0)  编辑  收藏  举报