美文网首页
【uni-app】封装的请求方法

【uni-app】封装的请求方法

作者: 北极星丶超帅的 | 来源:发表于2020-03-20 11:19 被阅读0次

    若后期优化了再更新,(题外话: h5请求代理不能设置路径别名,否则cookies会丢失,别问我怎么知道的,说多了都是泪)

    用法

    //api.js
    
    import http from './http/request.js'
    // 登录
    export const login = params => http.post(`login`, params)
    

    request.js

    import base from './config'
    
    
    //  统一给参数
    const dataObj = (url, params) => {
        let options = params
    
        // #ifdef APP-PLUS
        // DOTO:暂时没处理过,只是放在这里
        let data = null; //业务数据
        let terminal = 1 //终端类型,web:0,app:1
        options = {
            ...params,
            data,
            sign,
            terminal
        }
        // #endif
    
        return options
    }
    
    const goLogin = () => {
        uni.clearStorageSync();
        uni.reLaunch({
            url: '/pages/login/Login'
        }) //未授权,请重新登录(401)
    }
    
    // 请求错误处理
    const checkError = (e, reject) => {
        // console.error("----接口错误----", e)
        if (e.data) {
            if (e.data.code) {
                switch (Number(e.data.code)) {
                    case 401:
                        goLogin()
                        break;
                }
            }
            reject(e.data)
        } else {
            reject({
                'msg': '接口錯誤'
            })
        }
    }
    
    // 封装请求
    const request = (method, url, options) => {
        let methods = '';
        let headers = {};
        switch (method) {
            case 'get':
                methods = 'GET'
                headers = {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
                }
                break;
            case 'post':
                methods = 'POST'
                headers = {
                    'Content-Type': 'application/json; charset=UTF-8'
                }
                break;
            case 'postForm':
                methods = 'POST'
                headers = {
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                }
                break;
        }
        let obj = {},
            hideLoading = false,
            loadingText = 'loading...';
        if (options) { //如果有options
            if (options.hideLoading) {
                hideLoading = options.hideLoading
                delete options.hideLoading
            }
            if (options.loadingText) {
                loadingText = options.loadingText
                delete options.loadingText
            }
        }
    
        return new Promise((resolve, reject) => {
            !hideLoading && uni.showLoading({
                title: loadingText
            })
            uni.request({
                url: `${base.BASE_URL}${url}`,
                method: methods,
                data: dataObj(url, options),
                header: headers,
                success: res => {
                    if (res.statusCode == 200) {
                        if (res.data && (res.data.code == 200 || res.data.code == "00")) {
                            resolve(res.data)
                        } else {
                            checkError(res, reject)
                        }
                    } else {
                        reject({
                            'msg': '请求錯誤(' + res.statusCode + ')'
                        })
                    }
                },
                fail: e => {
                    checkError(e, reject)
                },
                complete: () => {
                    uni.hideLoading()
                }
            })
        })
    }
    
    
    // 上传文件 封装请求
    const uploadFile = (url, options) => {
        let tempData = options || {}
        uni.showLoading({
            title: "上传中..."
        })
    
        return new Promise((resolve, reject) => {
            uni.uploadFile({
                url: `${base.BASE_URL}${url}`,
                filePath: tempData.file,
                name: 'file',
                formData: tempData,
                success: res => {
                    if (res.statusCode == 200) {
                        let temp = JSON.parse(res.data)
                        // console.log('temp',temp)
                        if (temp.code == 200) {
                            resolve(temp)
                        } else {
                            reject(temp)
                            uni.showToast({
                                title: temp.msg || '接口错误(' + temp.code + ')',
                                icon: 'none'
                            })
                        }
                    } else {
                        uni.showToast({
                            title: `未知错误(${res.statusCode})`,
                            icon: 'none'
                        })
                    }
                },
                fail(e) {
                    uni.showToast({
                        title: '接口请求超时',
                        icon: 'none'
                    })
                    reject(e.data)
                },
                complete: () => {
                    uni.hideLoading()
                }
            });
        })
    }
    
    
    export default {
        get: (url, options) => {
            return request('get', url, options)
        },
    
        // JOSN格式
        post: (url, options) => {
            return request('post', url, options)
        },
    
        // form-data格式
        postForm: (url, options) => {
            return request('postForm', url, options)
        },
    
        // 上传
        upload: (url, options) => {
            return uploadFile(url, options)
        }
    }
    

    config.js

    const ENV = process.env.NODE_ENV; 
    console.log('当前环境', process.env.NODE_ENV)
    
    const apiHub = {
        //开发环境
        development: {
            BASE_URL: "/api/", 
            IMG_URL: "https://xx",
            BASE_UPLOAD_URL: "",
        },
    
        //测试环境
        test: {
            BASE_URL: "https://xxx",
            IMG_URL: "https://xxx",
            BASE_UPLOAD_URL: "",
        },
    
        //生产环境
        production: {
            BASE_URL: "https://xx",
            IMG_URL: "https://xx",
            BASE_UPLOAD_URL: "",
        }
    }
    
    // 导出配置
    export default {
        ENV: ENV,
        ...apiHub[ENV]
    }
    

    相关文章

      网友评论

          本文标题:【uni-app】封装的请求方法

          本文链接:https://www.haomeiwen.com/subject/tmadyhtx.html