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