# tui-request 网络请求 会员组件
介绍
网络请求:支持Promise,支持请求拦截和响应拦截,支持请求未结束之前阻止重复请求等,具体使用请参考文档。
# 引入
# uni-app引入
在 main.js
中全局引入
import http from './components/common/tui-request'
//初始化请求配置项
http.create({
host: 'https://www.thorui.cn',
header: {
'content-type': 'application/x-www-form-urlencoded'
}
})
//请求拦截
http.interceptors.request.use(config => {
let token = uni.getStorageSync('thorui_token');
if (config.header) {
config.header['Authorization'] = token
} else {
config.header = {
'Authorization': token
}
}
return config
})
//响应拦截
http.interceptors.response.use(response => {
//TODO
return response
})
// #ifndef VUE3
Vue.prototype.http = http
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(store)
app.config.globalProperties.http = http;
return {
app
}
}
// #endif
# 微信小程序引入
在 app.js
中全局引入
import http from './components/common/tui-request/index'
//初始化请求配置项
http.create({
host: 'https://www.thorui.cn',
header: {
'content-type': 'application/x-www-form-urlencoded'
}
})
//请求拦截
http.interceptors.request.use(config => {
console.log('进入了请求拦截~')
let token = wx.getStorageSync('thorui_token');
if (config.header) {
config.header['Authorization'] = token
} else {
config.header = {
'Authorization': token
}
}
return config
})
//响应拦截
http.interceptors.response.use(response => {
//TODO
console.log('进入了响应拦截~')
return response
})
wx.$http = http
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
/**
* 案例只展示了get请求,post请求和get请求类似 this.http.post
* 其他请求方式,如PUT、DELETE等,请使用api:this.http.request
* */
// uni-app中使用
//返回全部数据
get() {
this.http.get('/Home/GetStatus').then(res => {
console.log(res)
const d = res.data;
if (d.code == 100) {
this.tui.toast('请求成功!')
}
}).catch(e => {
console.log(e)
})
},
//返回简洁数据
get2() {
this.http.get('/Home/GetStatus', {
//参数
data:{version:'v1.6.3'},
//仅返回data数据
concise: true
}).then(res => {
console.log(res)
if (res.code == 100) {
this.tui.toast('请求成功!' + JSON.stringify(res))
}
}).catch(e => {
console.log(e)
})
},
//携带参数
get3() {
this.http.request({
url: '/Home/GetStatus',
method: 'GET',
data: {
version: 'v1.6.3'
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.code == 100) {
this.tui.toast('请求成功!' + JSON.stringify(d))
}
}).catch(e => {})
},
get4() {
//合并多个请求:都返回数据后再进行其他操作
let func1 = this.http.get('/Home/GetStatus')
let func2 = this.http.get('/Home/GetStatus', {
concise: true
})
this.http.all([func1, func2]).then(res => {
console.log(res)
this.tui.toast('请求成功!')
}).catch(e => {})
},
async get5() {
//异步转同步
let res = await this.http.get('/Home/GetStatus', {
concise: true
})
console.log(res)
console.log('计算结果:1+res.data=' + (1 + res.data))
this.tui.toast('请求成功!' + JSON.stringify(res))
}
//微信小程序中使用
//返回全部数据
get() {
wx.$http.get('/Home/GetStatus').then(res => {
console.log(res)
const d = res.data;
if (d.code == 100) {
tui.toast('请求成功!')
}
}).catch(e => {
console.log(e)
})
},
//返回简洁数据
get2() {
wx.$http.get('/Home/GetStatus', {
//参数
data:{version:'v1.6.3'},
//仅返回data数据
concise: true
}).then(res => {
console.log(res)
if (res.code == 100) {
tui.toast('请求成功!' + JSON.stringify(res))
}
}).catch(e => {
console.log(e)
})
},
get3() {
wx.$http.request({
url: '/Home/GetStatus',
method: 'GET',
data: {
version: 'v1.6.3'
}
}).then(res => {
console.log(res)
const d = res.data;
if (d.code == 100) {
tui.toast('请求成功!' + JSON.stringify(d))
}
}).catch(e => {})
},
get4() {
//合并多个请求:都返回数据后再进行其他操作
let func1 = wx.$http.get('/Home/GetStatus')
let func2 = wx.$http.get('/Home/GetStatus', {
concise: true
})
wx.$http.all([func1, func2]).then(res => {
console.log(res)
tui.toast('请求成功!')
}).catch(e => {})
},
async get5() {
let res = await wx.$http.get('/Home/GetStatus', {
concise: true
})
console.log(res)
console.log('计算结果:1+res.data=' + (1 + res.data))
tui.toast('请求成功!' + JSON.stringify(res))
}
# config 所有配置项
config() {
return {
//接口域名:https://base.com
host: '',
//接口地址:/login
url: '',
//请求参数
data: {},
//请求头
header: {
'content-type': 'application/json'
},
method: 'POST',
//请求超时时间,大于0时才生效,否则使用全局配置或者默认值
timeout: 0,
dataType: 'json',
//请求taskKey(String),拦截重复请求,不同接口请求名称不可相同,否则会拦截重复key的请求,不传默认不拦截
requestTaskKey: '',
//是否只返回简洁的接口数据:true 仅返回接口数据data,false 返回包含header、statusCode、errMsg、data等数据
concise: false,
//请求时是否显示默认loading等待框
showLoading: true,
//请求失败时提示的错误消息,为空则不提示
errorMsg: '网络不给力,请稍后再试~'
}
}
# Methods
const http = {
interceptors: {
request: {
//请求拦截
use: (fulfilled, rejected) => {},
//移除拦截
eject: (name) => {}
},
response: {
//响应拦截
use: (fulfilled, rejected) => {},
//移除拦截
eject: (name) => {}
}
},
//初始化配置项,详细config见文档配置说明
create(config) {},
//get请求,参数url,config
get(url, config = {}) {},
//post请求,参数url,config
post(url, config = {}) {},
//合并请求,参数requests:[func1, func2]
all(requests) {},
//request请求,可以发起任何平台支持的请求方式,get,post等
request(config = {}) {}
}
# 预览
# 特别说明
该组件为 会员组件
,非开源内容,需开通会员才可获取使用。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |