uni-app二次封装接口请求

叁歲伎倆 2022-12-09 01:52 209阅读 0赞

uni-app二次封装接口请求，使用Promise实现链式回调

class HTTP {
    	request({
    		url,
    		data = {},
    		method = 'POST'
    	}) {
    		return new Promise((resolve, reject) => {
    			this._request(url, resolve, reject, data, method)
    		})
    	}
    	
    	_request(url, resolve, reject, data, method) {
    		uni.request({
    			url: `${apiUrl}/${merchant_id}${url}`,
    			method: method,
    			data: method==='POST' ? qs.stringify(data) : data,
    			header: {
    				'Content-Type': 'application/x-www-form-urlencoded',
    				'Authorization': 'Bearer ' + auth.getToken(),
    				'from-id': getApp() != undefined ? getApp().globalData.from_id : ''
    			},
    			success: (res) => {
    				const code = res.statusCode.toString()
    				if (code.startsWith('2')) {
    					// 请重新登录
    					if (res.data.code === 202) {
    						uni.clearStorageSync()
    						getApp().globalData.isLogin = 1
    						this.$Router.pushTab({
    							path: '/pages/user/index'
    						})
    						return
    					}
    					// 数据响应
    					if (res.data.code === 200) {
    						resolve(res.data.data)
    					} else {
    						this.show_error(res.data.message)
    						reject(res.data.message)
    					}
    				} else {
    					reject()
    					this.show_error(res.data.message)
    				}
    			},
    			fail: (err) => {
    				reject()
    				this.show_error('网络错误')
    			}
    
    		})
    	}
    	show_error(msg) {
    		wx.showToast({
    			title: msg,
    			icon: 'none',
    			duration: 2000
    		})
    	}
    	
    }
    
    export {
    	HTTP
    }
    
    
    实战使用：
    
    第一：创建model目录，底下在创建apiModel.js
    import {
    	HTTP
    } from '../utils/http.js'
    
    class apiModel extends HTTP {
    	
    	// 商户登录
    	Auto_Login(data={}) {
    		return this.request({
    			url: '/auth/login',
    			data: data
    		})
    	}
    }
    
    const api = new apiModel()
    
    export {
    	api
    }
    
    
    第二：挂载在main.js中
    import { api } from './model/apiModel.js'
    Vue.prototype.$Api = api;
    
    第三：组件上使用
    this.$Api.Home_Data({
        page:1,
        pageSize:10
    }).then(res => {
    	this.homeData = res
    	this.isLoading = false
    })