uni-app request 请求原生方式封装

本文同步发布在：uni-app request 请求原生方式封装

uni-app 的 request 请求封装方式有很多种，这里介绍一种原生的封装方式。

创建 http.js

在项目根路径下新建 commons 文件夹，并创建一个 http.js，内容如下：

const baseUrl = 'http://127.0.0.1:8080/api/'const showToast = (title) => {uni.showToast({title: title,icon: 'none'})
}/**请求接口* @method http* @param {String} url 接口地址* @param {Object} obj 接口配置和参数* @return {Object} requestTask*/
const http = (url, obj) => {let option = obj.option || {}let hideLoading = option.hideLoading || false // 是否显示 loadinglet hideMsg = option.hideMsg || false // 是否隐藏错误提示let data = obj.data || {} // 请求数据let token = '' // 登录鉴权获得的 tokenuni.getStorage({key: 'token',success: (ress) => {token = ress.data}})if (!hideLoading) {uni.showLoading({title: '加载中...',mask: true})}return uni.request({url: baseUrl + url,method: option.method || 'POST', // 默认 post 请求header: {'Token': token},data: data,success: res => { // 服务器成功返回的回调函数if (!hideLoading) uni.hideLoading()if (res.statusCode === 200) {let result = res.dataif (result.errcode === '0') {if (obj.success) obj.success(result)return}if (obj.fail) obj.fail(result.errmsg)if (!hideMsg) showToast(result.errmsg)} else { // 返回值非 200，强制显示提示信息showToast('[' + res.statusCode + '] 系统处理失败')if (obj.fail) obj.fail('[' + res.statusCode + '] 系统处理失败')}},fail: (err) => { // 接口调用失败的回调函数if (!hideLoading) uni.hideLoading()if (err.errMsg != 'request:fail abort') {showToast('连接超时，请检查您的网络。')if (obj.fail) obj.fail('连接超时，请检查您的网络。')}}})
}
export default http

导入和使用 http.js

在需要请求接口的地方导入 http.js。

import http from '@/commons/http.js'

具体使用方式如下：

const requestTask = http('data/get', {data: {id: id},option: {hideLoading: false, // 默认 falsehideMsg: true, // 默认 falsemethod: 'POST' // 默认 POST},success: res => {console.log(res.data)},fail: err => {console.log(err)}
})// 如果需要的话，可以通过改方法中断请求任务
requestTask.abort()

本文同步发布在：uni-app request 请求原生方式封装

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！