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了吗?在你那你就完蛋了
  • 相关阅读:
    ASP.NET中几种加密方法
    Linux Mint17.1安装PHPStorm8.0.2
    HTTP 错误 500.23
    Kali Linux 下安装配置MongoDB数据库 ubuntu 下安装配置MongoDB源码安装数据库
    如何在Ubuntu 18.04 LTS上安装和配置MongoDB
    scrapy 如何链接有密码的redis scrapy-redis 设置redis 密码 scrapy-redis如何为redis配置密码
    Redis报错:DENIED Redis is running in protected mode
    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2 "No such file or directory")
    用mingw32编译ffmpeg2.7
    VS2005编译QT4.8.2
  • 原文地址:https://www.cnblogs.com/web-shu/p/12014842.html
Copyright © 2011-2022 走看看