uni对请求的简单封装

   由于uni官网上提供的API对各类请求都有自己独立的方法API,所以封装请求就与和vue有一定的出入,为了避免页面上的大量请求带来的冗余,所以个人先简单封装一下。

//设置连接
const baseUrl = "";//这里填写自己的地址  
let token =uni.getStorageSync("token");
//取自己的全局token,vuex,storage都不一样,这里就自己视情况了
// 无token请求,请求如登录之类的
const noRequest = (opts, data) => {
    let httpDefaultOpts = {
        url: baseUrl+opts.url,
        data: data,
        method: opts.method,
        header: opts.method == 'get' ? {
        'X-Requested-With': 'XMLHttpRequest',
        "Accept": "application/json",
        "Content-Type": "application/json; charset=UTF-8"
    } : {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
        dataType: 'json',
    }
    let promise = new Promise(function(resolve, reject){
        uni.request(httpDefaultOpts).then(
            (res) => {
                resolve(res[1])
            }
        ).catch(
            (response) => {
                reject(response)
            }
        )
    })
    return promise
};
//带Token请求的请求
const tokenRequest = (opts, data) => {
	data.token=token
    //此token是登录成功后后台返回保存在storage中的
    let httpDefaultOpts = {
        url: baseUrl+opts.url,
		dataType: 'json',
        data: data,
        method: opts.method,
        header: opts.method == 'get' ? {
		// 'Token': token,
        'X-Requested-With': 'XMLHttpRequest',
        "Accept": "application/json",
        "Content-Type": "application/json; charset=UTF-8"
    } : {
		// 'Token': token,
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    }
    let promise = new Promise(function(resolve, reject) {
        uni.request(httpDefaultOpts).then(
            (res) => {
                resolve(res[1])
            }
        ).catch(
            (response) => {
                reject(response)
            }
        )
    })
    return promise
};
//图片的上传,这是因为uni对文件、图片之类的上传独立出来了,所以也单独提供一个方法
const imgRequest= (opts, data) => {
	let httpDefaultOpts = {
	    url: baseUrl+opts.url,
		filePath: data,
	    name: 'file',
		formData: {
			'user': 'test'
		},
	}
	let promise = new Promise(function(resolve, reject) {
	    uni.uploadFile(httpDefaultOpts).then(
	        (res) => {
	            resolve(res[1])
	        }
	    ).catch(
	        (response) => {
	            reject(response)
	        }
	    )
	})
	return promise
}
 
export default {baseUrl,noRequest,tokenRequest,	imgRequest}

main.js全局引入这个文件

import http from 'http.js'
Vue.prototype.$https=http

调用请求时这样引入

let _this = this
let opts={url:"自己的接口地址",method:"post||get方法"}
let params={phone:_this.userName}
_this.$https.tokenRequest(opts,params).then(res=>{
	console.log(res)
	if(res.code!="200"){
		console.log("由于暂时没有写拦截器,就在这里看它的异常了")
	}else{
		console.log("这里就执行自己的回调处理了")				
	}
}).error(err=>{
console.log(err)
})

当然了,这只是对请求的一些简单处理,并没有加入拦截器。之后加入拦截器再给大家一起分享!如有错误,欢迎指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值