uniapp封装url

本文主要介绍了在uni-app中如何进行URL的封装,通过javascript实现更便捷和安全的URL操作,提升前端应用的代码组织和可维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.新建一个api.js,例举一个登录,有多个接口都可以写在api.js
var loginInfo = '/app/appuser/login';
........多个var省略
export default {
    // login:login,//登陆
	loginInfo:loginInfo,
	..........多个变量省略
};



2.新建一个request.js,用来封装接口
const Url ='http://接口地址'; 
//登陆 ,未绑定时进行绑定 请求 
function loginRequest(url,data){
	var promise = new Promise((resolve,reject)=>{
	var that = this;
	var params = data;
	
	uni.request({
	     url:Url + url,
	     data:params,
	     method:'POST',
	   header:{
	     'content-type': 'application/x-www-form-urlencoded'
	   },
	     success:function(res){
	        resolve(res)
	     },
	     error:function(error){
	        reject(error)
	     }
	})
 })
	  return promise
}

//get请求封装
function getRequest(url,data,token){
   var promise = new Promise((resolve,reject)=>{
       var that = this;
       var params;
	   if(data == undefined || data == ""){
		   params = {};
	   }else{
		   params = data;
	   }
       uni.request({
            url:Url + url,
            data:params,
            method:'GET',
          header:{
            'content-type': 'application/x-www-form-urlencoded',
			'Authorization': token
          },
            success:function(res){
					// uni.hideLoading();
               resolve(res)
			
            },
            error:function(error){
					// uni.hideLoading();
               reject(error)
			    // console.log('js里面的token',token);
            }
       })
   })
   return promise
}


//post请求封装
//post 封装
function postRequest(url,data,token){
    var promise = new Promise((resolve,reject)=>{
        var that = this;
        var params = data;
        uni.request({
            url:Url+url,
            data:params,
            method:'POST',
            header:{
              'content-type': 'application/x-www-form-urlencoded',
			  'Authorization':token
            },
            success:function(res){
               resolve(res)
            },
            error:function(error){
               reject(error)
            }
        })
    })
    return promise
}

//将封装的请求方法供外部访问
export default{
	postRequest:postRequest,
	getRequest:getRequest,
	loginRequest:loginRequest
}

3.新建一个httpApi.js文件
const Url ='http://www.hn...';//服务接口地址
export default{
	Url:Url,//接口请求头
}

4.在main.js注册
import httpApi from './js/httpApi.js';
import api from './js/api.js';
import request from './js/request.js'

 // 赋值到vue里面
Vue.prototype.$httpApi = httpApi
Vue.prototype.$api = api


5.vue页面请求使用
let params = {};
that.$request.getRequest(that.$api.loginInfo ,params,that.token).then(res=>{
			 // console.log("成功的:",res)
	 if (res.data.Dispatchlist.length == 0) {
	 		//代码省略
		}
	 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值