uni对请求的简单封装

it2025-01-09  6

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

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

最新回复(0)