请求方法封装

简介: 请求方法封装
const BASE_URL = "http://192.168.1.57:8080/api/";
// 获取储存的子女姓名
const childrenName = uni.getStorageSync("childrenName");
// 获取储存的子女手机号码
const childrenPhone = uni.getStorageSync("childrenPhone");
const myRequest = (options) => {
    // 调接口加载
    uni.showLoading({
        title: "加载中",
        mask: true,
    });
    return new Promise((resolve, reject) => {
        uni.request({
            url: BASE_URL + options.url,
            //默认参数
            data: options.data || {},
            // 非必填
            timeout: 60000, //超时时间, 默认60000,单位 ms
            dataType: json, //如果设为 json,会尝试对返回的数据做一次 JSON.parse
            // 配置请求头参数-例如token
            header: {
                Authorization: uni.getStorageSync("token") ?
                    uni.getStorageSync("token") :
                    "",
            } || {},
            method: options.method || "GET",
            // sslVerify: true,
            // 接口请求成功
            success: (res) => {
                // 关闭加载
                uni.hideLoading();
                // console.log('接口所有参数', res);
                if (res.statusCode !== 200) {
                    // 不同报错信息的提示和配置
                    if (res.statusCode == 500) {
                        return uni.showToast({
                            title: "服务器重启中...",
                            icon: "none",
                            mask: true,
                        });
                    } else {
                        return uni.showToast({
                            title: "获取数据失败",
                            icon: "none",
                            mask: true,
                        });
                    }
                }
                // 调用成功且有数据 返回数据  组件内通过 .then() 或者async await 接受异步返回数据
                //resolve(res.data)
                //在接口200 调用成功后 才能进行判断接口内的状态码 code 以此判定作何操作和提示
                const {
                    statusCode,
                    data
                } = res;
                let return_code = res.data.code;
                let return_message = res.data.message;
                switch (return_code) {
                    case 200:
                        // 成功的数据data状态码  则直接返回数据
                        resolve(res.data);
                        break;
                    case 401: //表示无权限
                        uni.clearStorage();
                        uni.showModal({
                            title: "提示",
                            content: "身份失效,请重新登录!",
                            complete: () => {
                                uni.reLaunch({
                                    url: "/pages/login/index",
                                });
                            },
                        });
                        break;
                    default:
                        // 其他的如无特定要求 则做提示
                        // reject(res.data)
                        return uni.showToast({
                            title: return_message || "请求失败",
                            duration: 2000,
                            icon: "none",
                        });
                }
            },
            // 接口接口失败
            fail: (error) => {
                // 关闭加载
                uni.hideLoading();
                console.log(2, error);
                uni.showToast({
                    title: "网络异常",
                    icon: "none",
                    mask: true,
                });
                // 失败数据
                reject(error);
            },
        });
    });
};
const getRequest = (url, data) => {
    var promise = new Promise((resolve, reject) => {
        var postData = data;
        uni.request({
            url: commoneUrl + url,
            data: postData,
            method: "GET",
            dataType: "json",
            header: {
                "content-type": "application/json",
            },
            success: function(res) {
                if (res.statusCode === 200) {
                    resolve(res.data);
                } else {
                    resolve(res.data);
                }
            },
            error: function(e) {
                reject("网络出错");
            },
        });
    });
    return promise;
};
//post请求封装
const postRequest = (url, data) => {
    var promise = new Promise((resolve, reject) => {
        var postData = data;
        uni.request({
            url: commoneUrl + url,
            data: postData,
            method: "POST",
            // withCredentials:true,
            header: {
                "content-type": "application/x-www-form-urlencoded",
                // "Authorization":'22'
            },
            success: function(res) {
                // console.log(res);
                if (res.statusCode === 200 && res.data.resultCode == 0) {
                    resolve(res.data);
                } else {
                    resolve(res.data);
                }
            },
            error: function(e) {
                reject("网络出错");
            },
        });
    });
    return promise;
};
//带Token请求
const httpTokenRequest = (opts, data) => {
    uni.onNetworkStatusChange((res) => {
        if (!res.isConnected) {
            uni.showToast({
                title: '网络连接不可用!',
                icon: 'none'
            });
        }
        return false
    });
    // 调接口加载
    let token = uni.getStorageSync('token');
    // hadToken()
    if (token == '' || token == undefined || token == null) {
        uni.showToast({
            title: '账号已过期,请重新登录',
            icon: 'none',
            complete: function() {
                uni.reLaunch({
                    url: '/pages/login/index'
                });
            }
        });
    } else {
        let httpDefaultOpts = {
            url: baseUrl + opts.url,
            data: data,
            method: opts.method,
            header: opts.method == 'get' ? {
                'X-Access-Token': token,
                'X-Requested-With': 'XMLHttpRequest',
                "Accept": "application/json",
                "Content-Type": "application/json; charset=UTF-8"
            } : {
                'X-Access-Token': token,
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json; charset=UTF-8'
            },
            dataType: 'json',
        }
        uni.showLoading({
            title: "加载中",
         mask: true,
        });
        let promise = new Promise(function(resolve, reject) {
            uni.request(httpDefaultOpts).then(
                (res) => {
                    // 关闭加载
                    uni.hideLoading();
                    if (res[1].data.code == 200) {
                        resolve(res[1])
                    } else {
                        if (res[1].data.code == 5000) {
                            uni.reLaunch({
                                url: '/pages/login/index'
                            });
                            // 清除本地所有缓存
                            uni.clearStorageSync();
                        } else {
                            // 成功回调
                            resolve(res[1])
                        }
                    }
                }
            ).catch(
                (response) => {
                    // 关闭加载
                    uni.hideLoading();
                    reject(response)
                }
            )
        })
        return promise
    }
    // let token = uni.getStorageSync('token')
    //此token是登录成功后后台返回保存在storage中的
};
// 不带token请求
const httpRequest = (opts, data) => {
    uni.onNetworkStatusChange(function(res) {
        if (!res.isConnected) {
            uni.showToast({
                title: '网络连接不可用!',
                icon: 'none'
            });
        }
        return false
    });
    let httpDefaultOpts = {
        url: baseUrl + opts.url,
        data: data,
        method: opts.method,
        header: opts.method == 'get' || 'GET' ? {
            'X-Requested-With': 'XMLHttpRequest',
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        } : {
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json; charset=UTF-8'
        },
        dataType: 'json',
    }
    uni.showLoading({
        title: "加载中",
        mask: true,
    });
    let promise = new Promise(function(resolve, reject) {
        uni.request(httpDefaultOpts).then(
            (res) => {
                // 关闭加载
                uni.hideLoading();
                resolve(res[1])
            }
        ).catch(
            (response) => {
                // 关闭加载
                uni.hideLoading();
                reject(response)
            }
        )
    })
    return promise
};
// 判断本地是否存在token
const hadToken = () => {
    let token = uni.getStorageSync('token');
    if (token == '' || token == undefined || token == null) {
        uni.showToast({
            title: '账号已过期,请重新登录',
            icon: 'none',
            complete: function() {
                uni.reLaunch({
                    url: '/pages/login/index'
                });
            }
        });
        return false;
    }
    return true
}
module.exports = {
    myRequest: myRequest, //发起请求 请求头携带token
    postRequest: postRequest, //Get请求封装
    postRequest: postRequest, //post请求封装
    httpTokenRequest: httpTokenRequest, //带Token请求
    httpRequest: httpRequest ,//不带Token请求
    hadToken:hadToken //判断本地是否存在token
};
相关文章
|
9月前
|
网络协议 网络架构
数据从发出到接收的细节介绍{封装与解封装}
本文将介绍了详细的封装在每一层的具体的操作,可以让大家学习到数据从发出到收到的具体过程。
|
移动开发 前端开发 应用服务中间件
解决前端H5调用后端接口出现302问题总结
解决前端H5调用后端接口出现302问题总结
7976 0
解决前端H5调用后端接口出现302问题总结
|
12天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
9月前
|
存储 小程序 前端开发
小程序封装网络请求和拦截器
在开发小程序时,实际上我们通常需要封装网络请求和拦截器,以实现统一处理状态码和存储用户登录信息等功能。这样可以提高开发效率,减少代码重复,同时也可以提高代码的可维护性和可读性。
149 0
|
9月前
|
网络协议 程序员 网络架构
数据封装与解封装过程
数据封装与解封装过程
155 0
|
12月前
uiapp请求方法封装
uiapp请求方法封装
|
12月前
|
前端开发
封装ajax请求接口
封装ajax请求接口
86 0
|
消息中间件 JavaScript 小程序
OkHttp完美封装,一行搞完外部请求
OkHttp完美封装,一行搞完外部请求
|
前端开发 API
前端常用获取接口数据方法
前端常用获取接口数据方法
367 2
前端常用获取接口数据方法