uniapp封装request
文章描述：
uniapp封装request方法使用
第一步、根目录下新建 common/config.js 文件
const config = {
base_url: 'https://******.com/api'
}
export { config }
//自定义api
export default{
http:"https://******.com/api"
}
第二步、根目录下新建 common/http.js 文件
import {
config
} from './config.js'
export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
// 判断请求类型
let headerData = {
'content-type': 'application/json'
}
let dataObj = null
//因为我们的GET和POST请求结构不同这里我们做处理，大家根据自己后台接口所需结构灵活做调整吧
if(prams.header){
headerData = prams.header
}
if(prams.query){
dataObj = prams.query
}
return new Promise((resolve, reject) => {
let url = config.base_url + prams.url; //请求的网络地址和局地的api地址组合
uni.showLoading({
title: '加载中',
mask: true
})
return uni.request({
url: url,
data: dataObj,
method: prams.method,
header: headerData,
success: (res) => {
uni.hideLoading()
//这里是成功的返回码，大家根据自己的实际情况调整
resolve(res.data);
// console.log(res)
},
fail: (err) => {
reject(err);
console.log(err)
uni.hideLoading()
},
complete: (res) => {
console.log('请求完成')
uni.hideLoading()
// console.log(res.data)
}
});
})
}第三步、根目录main.js
import globals from './common/config.js';
Vue.prototype.$globals = globals;
第四部、页面中调用
载入
import { apiResquest } from '../../common/http.js'
import cache from '../../common/cache.js';
var _self, api;onload
_self = this;
api = _self.$globals.http;
POST请求
//这里可以设置需要传递的参数
apiResquest({
url: '/jeecg-system/sys/mLogin',
method: 'POST',
query:{username:'183****2362',password:'123456'}
}).then((res) => {
console.log(res)
if(res.code==200)
{
}
}).catch(err => {
console.log(err)
})GET请求和带头部token
apiResquest({
header:{'X-Access-Token':cache.getCache('token')},
url: '/jeecg-system/sys/user/queryById',
method: 'GET',
query:{id:userid}
}).then((res) => {
console.log(res)
}).catch(err => {
console.log(err)
})
发布时间：2022/03/25
发表评论