uni对请求的简单封装

傷城~ 2022-12-17 04:23 272阅读 0赞

由于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)
    })

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