封装一个axios请求后台的通用方法

import axios from ‘axios‘;
import constant from ‘@/js/const‘;
import alert from ‘@/js/alertView‘;

let env = process.env.NODE_ENV;
var needLogin = "";
let root = ‘‘;
let yxHeader;

if (env === ‘development‘) {
    console.log("api");
} else if (env === ‘production‘) {
    console.log("pro");
    root = ‘‘;
} else {
    throw ‘请检查process.env.NODE_ENV的值,是否符合这些值之一:development,production‘;
}

Date.prototype.format = function (fmt) {
    var o = {
        "y+": this.getFullYear(),
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "H+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds() //秒
    };
    if (!fmt) {
        fmt = ‘yyyy-MM-dd HH:mm:ss‘;
    }
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
    }
    return fmt;
}

// 自定义判断元素类型JS
function toType(obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
}

// 参数过滤函数
function filterNull(o) {
    for (var key in o) {
        if (o[key] === null) {
            delete o[key];
        }
        if (toType(o[key]) === ‘string‘) {
            o[key] = o[key].trim();
        } else if (toType(o[key]) === ‘date‘) {
            o[key] = (o[key].format());
        } else if (toType(o[key]) === ‘object‘) {
            o[key] = filterNull(o[key]);
        } else if (toType(o[key]) === ‘array‘) {
            o[key] = filterNull(o[key]);
        }
    }
    return o;
}

function apiAxios(method, url, params, success, failure, authFail) {
    console.log(‘url:‘ + url);
    if (params) {
        params = filterNull(params);
    }

    var base = "";
    if (url.indexOf(".html") != -1) {
        base = "";
    } else {
        base = root;
    }

    axios({
        method: method,
        url: url,
        data: method === ‘POST‘ || method === ‘PUT‘ || method === ‘DELETE‘ ? params : null,
        params: method === ‘GET‘ ? params : null,
        baseURL: base,
        withCredentials: true
    }).then(function (res) {
        if (res.status >= 200 && res.status <= 210) {
            if (success) {
                success(res);
            }
        } else {
            //不走
            // window.alert(‘error: ‘ + JSON.stringify(res.data));
        }
    }).catch(function (err) {
        let res = err.response;
        if (err && res) {
            console.log(res.status);
            if (res.status == 504) {
                alert.eduToast("服务器连接失败!请检查您的网络或服务器!!",2000);
                return;
            } else if (res.status == 401) {
                console.log(‘------------------:status‘+res.status);
                console.log(‘------------------:authFail‘+authFail);
                localStorage.setItem(‘login‘, ‘‘);
                showHeaderSignin();
            } else if(res.status == 750){
                var host = window.location.host;
                window.location.href = window.location.href.split(host)[0] + host + ‘?addressCode=‘ + constant.addressCode();
            }

            if (failure) {
                failure(res);
            } else {
                alert.eduToast(res.data,2000);
            }
        } else {
            if(authFail){
                localStorage.setItem(‘login‘, ‘‘);
            }else{
                console.log(err);
            }
        }
    });
}

// 返回在vue模板中的调用接口
export default {
    get: function (url, params, success, failure,authFail) {
        return apiAxios(‘GET‘, url, params, success, failure,authFail);
    },
    post: function (url, params, success, failure) {
        return apiAxios(‘POST‘, url, params, success, failure);
    },
    put: function (url, params, success, failure) {
        return apiAxios(‘PUT‘, url, params, success, failure);
    },
    delete: function (url, params, success, failure) {
        return apiAxios(‘DELETE‘, url, params, success, failure);
    },
    initHeader: function (headerModel) {
        yxHeader = headerModel;
        console.log(‘------------------:initHeader‘+yxHeader);
        if (needLogin && needLogin == "1") {
            yxHeader.mainLogin();
        }
    }
};

function showHeaderSignin() {
    localStorage.setItem(‘login‘, ‘‘);
    console.log(‘------------------:yxHeader‘+yxHeader);
    if (yxHeader) {
        if(localStorage.getItem(‘login‘) == "logining"){
            alert.eduToast(‘登录已过期请重新登录!‘,2000);
        }
        yxHeader.mainLogin();
    } else {
        needLogin = "1";
    }
}

原文地址:https://www.cnblogs.com/fqh123/p/10536695.html

时间: 2024-11-05 22:58:12

封装一个axios请求后台的通用方法的相关文章

block传值以及利用block封装一个网络请求类

1.block在俩个UIViewController间传值 最近刚学了几招block 的高级用法,其实就是利用block语法在俩个UIViewController之间传值,在这里分享给初学者,同时也方便我自己理解.我们知道UINavigationController类管理UIViewController的时候,利用的是"栈"的思想,在这里不做过多解释,切入正题,假设我们现在有俩个UIViewController,viewC1和viewC2,viewC1比viewC2先进入到UINavi

用XHR简单封装一个axios

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

浅谈webform开发时前台请求后台数据的方法

说到前台请求后台数据,我们一般都是用到AJAX(异步JavaScript和XML) .AJAX 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,我们可以对网页的某部分进行更新.在这里,主要浅谈一下在.net的webform开发时,前台请求后台的两种方式. 1.使用AjaxPro2.dll  (1)AjaxPro2.dll文件可以去网上下载,下载后引用到项目中. (2)引用到项目之后,在web.config里面的<system.web

尝试封装一个异步请求then方法和catch方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

31封装一个网络请求的服务

①创建一个服务类 @Injectable() 在服务类中定义方法.数据 sendRequest ( myUrl : string ) { return this.http.get( myUrl ).map(  (response : Response) => response.json()  ) } ②给服务指定提供商 providers : [ MyHttpService ]  模块.组件限定作用范围 ③调用服务 import { } this.myHttpService.sendRequse

封装一个JSONP请求

首先,先介绍下jsonp的跨域原理: 1. 动态创建script标签2. 利用 script 的src属性,会自动发送请求3. 只需要将要请求的地址设置为 script标签的src属性的值4. 需要服务端的接口配合,必须返回 JSONP 格式的数据才行 注意: 1. 需要有个支持 JSONP 请求的接口地址2. 我们指定回调函数的名称3. 我们写一个 与回调函数名称 相同的函数4. 通过这个函数的参数就可以获取到服务器返回的数据了!!!5. 这个函数只能写在全局环境中!! 1 function

封装一个获取module.exports内容的方法

let fs = require('fs') let req = (moduleName) => { //content代表的是文件内容 let content = fs.readFileSync(moduleName, 'utf8') console.log(content + '\n return module.exports') //最后一个参数是函数的内容体 let fn = new Function('exports','module','require','__dirname','_

react封装基于axios的API请求

一.最近做的一个后台管理项目,基于antd-pro做的,需要封装基于axios请求,便于开发,直接上代码. import axios from 'axios'; export const MethodType = { GET: 'GET', POST: 'POST', PUT: 'PUT', DELETE: 'DELETE', PATCH:'PATCH' }; /** * 模块说明:有api_token的请求 */ export const request = (api, method = Me

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/