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了吗?在你那你就完蛋了
  • 相关阅读:
    Web用户的身份验证及WebApi权限验证流程的设计和实现
    开源工作流引擎CCFlow 学习专区
    Jquery Ajax方法传值到action
    再谈Jquery Ajax方法传递到action
    Windows下安装GTK+
    Tex使用
    配置Texmaker中文支持
    软件推荐列表(Recommand Software)
    CAD操作
    Package inputenc Error: Unicode char u8: not set up for use with LaTeX.
  • 原文地址:https://www.cnblogs.com/web-shu/p/12014842.html
Copyright © 2011-2022 走看看