uniapp请求数据方法 和二次封装
页面vue文件中请求方法
uni.request({ //获取信息 url: getApp().globalData.https + \'/api.php/Index/index\', data: {}, method: \'POST\', header: getApp().globalData.header, dataType: \'json\', success: function(res) { console.log(res); } })
APP.vue 文件中设置全局变量
<script> export default { globalData: { text: \'text\', https: "https://www.19870125.xyz", header: { \'content-type\': \'application/x-www-form-urlencoded\' }, }, onLaunch: function() { console.log(\'App Launch\') }, onShow: function() { console.log(\'App Show\') }, onHide: function() { console.log(\'App Hide\') } } </script> <style> /*每个页面公共css */ </style>
二次封装求取方法
新建文件夹util 文件api.js
const BASE_URL="https://www.19870125.xyz"; //域名抽取 const HEADER={ \'content-type\': \'application/x-www-form-urlencoded\' }; //头部 export const myRequest=(options)=>{ return new Promise((resolve,reject)=>{ uni.request({ url:BASE_URL+options.url, method:options.method||\'GET\', header: HEADER, data:options.data||{}, dataType: \'json\', success:(res)=>{ // if(res.data.status!==0){ // return uni.showToast({ // title:"获取数据失败" // }) // } resolve(res) }, fail:(err)=>{ reject(err); } }) }) }
在 main.js中引用
import Vue from \'vue\' import App from \'./App\'
//引入 import { myRequest } from \'./util/api.js\' //在原型中挂载 Vue.prototype.$myRequest=myRequest;
Vue.config.productionTip = false App.mpType = \'app\' const app = new Vue({ ...App }) app.$mount()
在页面中调用封装方法
export default { data() { return { } }, methods: { async getSwipers() { const res=await this.$myRequest({ url: \'/api.php/Index/index\', methods: "POST" }) console.log("getSwipers",res); } }, onLoad() { this.getSwipers(); } }
版权声明:本文为ddqyc原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。