更新记录

1.2.0(2024-08-22) 下载此版本

1

1.1.9(2024-08-13) 下载此版本

1

1.1.8(2024-07-25) 下载此版本

优化

查看更多

平台兼容性

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

x-network

用法说明

Http

import { http, uploadFile } from '@/uni_modules/x-network/demo/index.js'

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

http.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);
})

WebSocket

import { socketUrl } from '@/uni_modules/x-network/demo/config.js'
import { webSocket, Message } from '@/uni_modules/x-network/demo/index.js'
// 初始化完成表示连接成功
await webSocket.init(socketUrl + 'token')
// 发送消息
webSocket.send(new Message('newMessage', '这是一条新消息'))
// 关闭连接
webSocket.close()
// 在接受消息的地方监听
uni.$on('newMessage', data => {
    console.log(data)
})

/uni_modules/x-network/demo/index.js 文件内容 (该文件只是一个示例用法,实际使用请根据自己项目进行更改)

import {
    baseUrl,
    uploadUrl,
    socketUrl,
    requestTimeout,
    uploadTimeout
} from '@/uni_modules/x-network/demo/config.js'

import { Request, UploadFile } from '@/uni_modules/x-network/js_sdk/http.js'

import { MyWebSocket } from '@/uni_modules/x-network/js_sdk/webSocket.js'

import { isLoginExpire, fileLimit, logReqErr } from './utils.js'

export { Message } from '@/uni_modules/x-network/js_sdk/webSocket.js'

// 统一 loading 处理
const excludeLoadingUrl = ['/api/xxx'] // 不显示 loading 的 url
let requestLoadingCount = 0

// 请求拦截器支持异步 (如果返回失败的 Promise 或抛出错误将终止本次请求, 错误信息在响应拦截器处理)
const requestInterceptor = async function(options) {
    // console.log(options);

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

    options.header.token = uni.getStorageSync('token')

    if (options.filePath) fileLimit(options)
}

// 响应拦截器支持异步, 响应拦截器的返回值即请求的返回值 (处理请求响应结果或请求调用过程中出现的错误)
// 响应拦截器不是异步的话抛出错误即请求失败
const responseInterceptor = async function(res) {
    // reqConf: 请求的配置, err: 请求调用过程中出现的错误
    const {
        reqConf,
        err
    } = res
    // 输出请求信息, 方便 app 调试
    // #ifndef APP
    console.groupCollapsed(reqConf.url.replace(baseUrl, ''))
    // #endif
    // #ifdef APP
    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);
    // #ifdef APP
    console.log('------------------------------------------------------------------------------')
    // #endif
    // #ifndef APP
    console.groupEnd(reqConf.url.replace(baseUrl, ''))
    // #endif

    // 统一 loading 处理
    if (!excludeLoadingUrl.includes(reqConf.url.replace(baseUrl, ''))) {
        requestLoadingCount--
        if (!requestLoadingCount) {
            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 {
            logReqErr(res)
            // 不是登录过期提示后端的错误信息
            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 {
        logReqErr(res)
        // 请求失败
        // 不是登录过期和前端代码报错
        if (!isLoginExpire(res.statusCode) && !err) {
            uni.showToast({
                icon: "none",
                title: "网络错误, 请稍后重试~",
                duration: 2000,
            });
        }
        // 前端代码报错, 提示错误信息(可能是自己抛出的错误, 或 uniApi 的失败回调错误)
        if (err) {
            uni.showToast({
                icon: "none",
                title: err.message || err.errMsg,
                duration: 2000,
            });
        }
        return Promise.reject(res)
    }
}

// 创建网络请求实例
export const http = new Request({
    baseUrl,
    timeout: requestTimeout,
    requestInterceptor,
    responseInterceptor
})

// 创建上传文件实例
export const uploadFile = new UploadFile({
    uploadUrl,
    timeout: uploadTimeout,
    requestInterceptor,
    responseInterceptor
})

// 创建 webSocket 实例, 调用初始化方法连接到服务器 webSocket.init(socketUrl + token)
export const webSocket = new MyWebSocket((message) => {
    console.log('收到消息 ------ ', message);
    uni.$emit(message.event, message.content)
}, false)

插件如果对你有帮助给个好评吧~

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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