Uniapp中用class封装网络请求

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()

可以把这里面分别打印出来看一看

扫描二维码关注公众号，回复： 12443265 查看本文章

github上有详细的教程

github项目地址:https://github.com/lsh555/TmUniapp