class虽然前端开发用的不多,但是它的扩展性非常强,话不多说,直接上代码
例如我们的网络请求为
https://uniapp.cn/api/getlist
先创建一个request.js文件,里面放上请求地址
//请求地址
var url = 'https://uniapp.cn/api/'
const urls = class {
//静态方法 static
static m() {
//首页轮播图
let bannerget = `${url}getlist/`
return {
bannerget
}
}
}
export default urls
再封装一个错误的提示,errdata.js文件
// 提示
const errdata = {
errlist(err){
uni.showToast({
icon:'none',
title: err,
duration: 3000
});
}
}
export{errdata}
然后再创建一个api.js文件,里面放上封装的request
//request请求
import {errdata} from 'api/errdata.js'
const request = class {
constructor(url, arg) {
this.url = url
this.arg = arg
}
// post请求
modepost() {
return new Promise((resolve, reject) => {
uni.showLoading({
title:'加载中'
})
uni.request({
url: this.url,
method: 'POST',
data: this.arg,
})
.then(res => {
resolve(res[1].data)
uni.hideLoading()
})
.catch(err => {
reject(err)
let errs = '服务器错误 请稍后再试'
errdata.errlist(errs)
})
})
}
// get请求
modeget() {
return new Promise((resolve, reject) => {
uni.showLoading({
title:'加载中'
})
uni.request({
url: this.url,
method: 'GET',
})
.then(res => {
resolve(res[1].data)
uni.hideLoading()
})
.catch(err => {
reject(err)
let errs = '服务器错误 请稍后再试'
errdata.errlist(errs)
})
})
}
}
export default request
OK,然后在页面如何使用呢??
为了方便,我们先在main.js上,把它挂载到原型上
// 请求方式
import request from './api/api.js'
Vue.prototype.Request = request
// 请求地址
import urls from './api/request.js'
Vue.prototype.Urls = urls
在页面中
methods:{
async indexRequest() {
let banner = new this.Request(this.Urls.m().bannerget).modeget()
try{
let res = await banner
console.log(res)
}catch(e){
}
}
}
如何有多个请求同时发起咋整,就用promise.all
methods:{
async indexRequest() {
let banner = new this.Request(this.Urls.m().bannerget).modeget()
try{
let res = await Promise.all([banner])
console.log(res)
}catch(e){
}
}
}
如何你不理解这段是什么意思
let banner = new this.Request(this.Urls.m().bannerget).modeget()
可以把这里面分别打印出来看一看
github上有详细的教程
github项目地址:https://github.com/lsh555/TmUniapp