更新记录

1.0.18(2024-04-03)

更新文档

1.0.17(2024-04-03)

添加请求失败也会调用响应拦截器, 示例增加请求loading统一处理

1.0.16(2024-04-03)

文档更新

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

x-network

用法说明

import { request, uploadFile, webSocketInit } from '@/uni_modules/x-network/js_sdk/index.js'

request.get('/common/sysTime', { a: 123 }).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

request.post('/common/sysTime', { a: 321 }).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

// 上传单图
uploadFile.uploadImage({}, ({ uploadTask, filePath }) => {
    // uploadTask 用法参考 uni 官方文档 (https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile)
    console.log(uploadTask, filePath);    
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

// 上传多图
uploadFile.uploadImages({}, uploadTasks => {
    // uploadTask 用法参考 uni 官方文档 (https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile)
    console.log(uploadTasks);
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

// 上传视频
uploadFile.uploadVideo({}, ({ uploadTask, filePath }) => {
    // uploadTask 用法参考 uni 官方文档 (https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile)
    console.log(uploadTask, filePath);
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})

index.js (index.js 只是一个示例用法,实际使用请根据自己项目进行更改)

import { baseUrl, uploadUrl, socketUrl } from '@/uni_modules/x-network/js_sdk/config.js'
import { Request, UploadFile } from '@/uni_modules/x-network/js_sdk/http.js'
import { MyWebSocket, Message } from '@/uni_modules/x-network/js_sdk/webSocket.js'

// 登录过期判断
const isLoginExpire = code => {
    if (code == 401 || code == 402 || code == 403) {
        uni.removeStorageSync('token')
        uni.reLaunch({
            url: '/pages/login'
        })
        uni.showToast({
            icon: "none",
            title: "请登录",
            duration: 2000,
        });
        return true
    }
}

// 上传文件限制
const fileLimit = ({ filePath, fileInfo }) => {
    // console.log('fileLimit', filePath, fileInfo);
    const imgSize = 1024 * 1024 * 5
    const videoSize = 1024 * 1024 * 100
    const fileSizeLimit = {
        image: imgSize,
        jpg: imgSize,
        jpeg: imgSize,
        png: imgSize,
        gif: imgSize,
        video: videoSize,
        mp4: videoSize,
    }
    const fileTypes = Object.keys(fileSizeLimit)

    const pathSplit = filePath.split('.')
    let type = pathSplit[pathSplit.length - 1]
    // #ifdef H5
    type = fileInfo.type || fileInfo?.tempFile?.type
    // #endif

    const size = fileInfo.size

    const reg = new RegExp(fileTypes.join('|'))
    if (!reg.test(type) || !type) {
        const tips = `不支持类型“${type}”`
        uni.showToast({
            title: tips,
            icon: 'none'
        })
        throw Error(tips)
    }

    fileTypes.forEach(i => {
        if (new RegExp(i).test(type) && fileSizeLimit[i] < size) {
            const tips = `${type}类型文件限制“${(fileSizeLimit[i] / 1024 / 1024).toFixed(2)}MB”`
            uni.showToast({
                title: tips,
                icon: 'none'
            })
            throw Error(tips)
        }
    })
}

// 统一 loading 处理
const excludeLoadingUrl = ['/api/xxx']
const requestLoadingQueue = []

// 请求拦截器
const requestInterceptor = async function(options) {
    console.log(options);
    if (options.filePath) fileLimit(options)
    options.header.token = uni.getStorageSync('token')

    // 统一 loading 处理
    if (!excludeLoadingUrl.includes(options.url.replace(baseUrl, ''))) {
        uni.showLoading({
            mask: true
        })
        requestLoadingQueue.push(options.url)
    }
}

// 响应拦截器
const responseInterceptor = async function(res) {
    const { reqConf } = res
    // // #ifdef H5
    // console.groupCollapsed(reqConf.url.replace(baseUrl, ''))
    // // #endif
    // // #ifndef H5
    // console.log('------------------------------------------------------------------------------')
    // // #endif
    // console.log('req url', reqConf.url);
    // console.log('req header', reqConf.header);
    // console.log('req data', reqConf.data);
    // console.log('res data', res.data);
    // // #ifndef H5
    // console.log('------------------------------------------------------------------------------')
    // // #endif
    // // #ifdef H5
    // console.groupEnd(reqConf.url.replace(baseUrl, ''))
    // // #endif

    // 统一 loading 处理
    if (!excludeLoadingUrl.includes(reqConf.url.replace(baseUrl, ''))) {
        requestLoadingQueue.splice(requestLoadingQueue.indexOf(reqConf.url), 1)
        if (!requestLoadingQueue.length) {
            uni.hideLoading()
        }
    }

    if (res.statusCode == 200) {
        try {
            if (typeof res.data == 'string') res.data = JSON.parse(res.data)
        } catch (e) {}
        if (res.data.code == 200) {
            return res.data.data
        } else {
            if (!isLoginExpire(res.data.code)) {
                uni.showToast({
                    icon: "none",
                    title: res.data.msg || res.data.message || `Error code ${res.data.code}`,
                    duration: 2000,
                });
            }
            return Promise.reject(res)
        }
    } else {
        if (!isLoginExpire(res.statusCode)) {
            uni.showToast({
                icon: "none",
                title: "Server error",
                duration: 2000,
            });
        }
        return Promise.reject(res)
    }
}

export const request = new Request({
    baseUrl,
    timeout: 1000 * 30,
    requestInterceptor,
    responseInterceptor
})

export const uploadFile = new UploadFile({
    uploadUrl,
    timeout: 1000 * 60 * 3,
    requestInterceptor,
    responseInterceptor
})

// 初始化 webSocket
export const webSocketInit = (token) => {
    if (!token) throw Error('token is not defined, webSocketInit fail')
    try {
        const webSocket = new MyWebSocket(socketUrl + token, (message) => {
            console.log('收到消息 ------ ', message);
            uni.$emit(message.type, message.content)
        }, false)
        // #ifdef H5
        // 方便调试
        window.Message = Message
        window.webSocket = webSocket
        // #endif
        return webSocket
    } catch (e) {
        console.log(e);
    }
}

有问题联系QQ: 1824159241

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问