zoukankan      html  css  js  c++  java
  • 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) {}
        });
    }
    看到我的div了吗?在你那你就完蛋了
  • 相关阅读:
    PHP学习(二)
    PHP学习(一)
    JQuery学习小结
    Java学习(七)标准标签库JSTL
    Java学习(六)servlet 的引入
    Java学习(五)例题
    java学习(四)代码的设计
    Java学习(三)JSP学习1
    采用prometheus 监控mysql
    commonjs, nodejs, npm, browserify, watchify
  • 原文地址:https://www.cnblogs.com/web-shu/p/12014842.html
Copyright © 2011-2022 走看看