由于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) })当然了,这只是对请求的一些简单处理,并没有加入拦截器。之后加入拦截器再给大家一起分享!如有错误,欢迎指正!