uni-app封装ajax请求方法

分手后的思念是犯贱 2023-03-01 10:29 23阅读 0赞

位置项目根目录index.js

定义了两种请求get和post

import baseconfig from "./common/baseconfig.js"
    
    const httpClient = {
    	request:function(method,url,data){
    		var headers={
    			"Content-Type": "application/x-www-form-urlencoded",
    			"Auth-Token": uni.getStorageSync("auth_token")
    		};
    		
    		return new Promise((resolve,reject)=>{
    			uni.showLoading({
    				title:"加载中",
    				mask:true
    			});
    			
    			uni.request({
    				url:url,
    				header:headers,
    				data:data,
    				method:method,
    				dataType: 'json',
    				success:function(res){
    					uni.hideLoading()
    					console.log("接口获取原始数据：-------------------",res.data)
    					if(res.statusCode == 401){
    						uni.showToast({
    							icon: 'none',
    							duration:1000,
    							title: res.data.error.message
    						});
    						setTimeout(function(){
    							uni.reLaunch({
    								url: '../login/login'
    							});
    						},1500);
    					}else{
    						if(res.data.error != null){
    							uni.showToast({
    								icon: 'none',
    								duration:1000,
    								title: res.data.error.message
    							});
    							return;
    						}else{
    							resolve(res.data);
    						}
    					}
    				},
    				fail: function(err){
    					uni.hideLoading()
    					reject(err)
    				}
    			})
    		})
    	},
    	Get: function(url,data){
    		let allurl = this.geturl(url);
    		return this.request('GET',allurl,data)
    	},
    	Post: function(url,data){
    		let allurl = this.geturl(url);
    		return this.request('POST',allurl,data)
    	},
    	geturl:function(url){
    		return baseconfig.server+url
    	}
    };
    
    module.exports = httpClient

位置common/baseconfig.js

var baseconfig={};
    
    if(process.env.NODE_ENV === 'development'){
    	baseconfig = {
    		server:'http://development.test.net'
    	}
    }else if(process.env.NODE_ENV === 'production'){
    	baseconfig = {
    		server:'http://production.test.net'
    	}
    }
    
    export default baseconfig;

根目录main.js修改

import \{get,post\} from ‘./api.js’  
Vue.prototype.apiget = get  
Vue.prototype.apipost = post  
注册后在vue文件可以this.apiget直接调用

import Vue from 'vue'
    import App from './App'
    
    import store from './store'
    
    import {get,post} from './api.js'
    Vue.prototype.apiget = get
    Vue.prototype.apipost = post
    
    Vue.config.productionTip = false
    
    Vue.prototype.$store = store
    
    App.mpType = 'app'
    
    const app = new Vue({
    	store,
    	...App
    })
    app.$mount()

### demo.vue  测试案例 ###

methods:{
    	minfo() {
    				let that=this
    				that.apiget('/broker/my/info/dealer',{}).then(res => {
    					that.dealer = res.dealer
    				});
    			}
    }