uni-app/微信小程序 请求方法封装使用async await
问题描述:网络请求每个页面基本都会用到,如不封装代码会十分难以维护,此方法需要npm下载await-to-js 包,用于接收参数,话不多说直接上代码导入await-to-js包后,在mian.js 将 await 引入全局使用import to from 'await-to-js';Vue.prototype.$to = to;请求方法import config from '@/config.js
·
问题描述:网络请求每个页面基本都会用到,如不封装代码会十分难以维护,此方法需要npm下载await-to-js 包,用于接收参数,话不多说直接上代码
导入await-to-js包后,在mian.js 将 $to 引入全局使用,用于页面接收参数
import to from 'await-to-js';
Vue.prototype.$to = to;
请求方法
import config from '@/config.js';//配置文件
/*
url:请求地址
param:请求参数
isShowLoading :是否显示加载中动画(默认显示)
method:请求类型(默认POST),
isToken:请求是否携带token
*/
export function request(url, param,isShowLoading = true, method = 'POST',isToken=true) {
if (isShowLoading) {
uni.showLoading({
title: '正在加载...'
})
}
let token=uni.getStorageSync('token_key');//一般登录后token写在缓存中方便每次请求取用
let header = {
};
if(token && isToken){ //如果token有值并设为携带
header.token=token;//根据后端要求将token携带在请求头
}
console.log('请求参数:',param);
return new Promise((resolve, reject) => {//promise封装异步
uni.request({
url: config.host + url,//请求路径写在config文件里取
data: param,
method: method,
header: header,
timeout: 30000,
success(res) {
if (isShowLoading) {
uni.hideLoading();
}
if(res.data.code==200){//约定code值为200则为成功
resolve(res.data);
}else{
reject(res.data);//否则为请求失败,弹出后端返回提示语
uni.showToast({
icon:'none',
title:res.data.message
})
}
},
fail(err) {
if (isShowLoading) {
uni.hideLoading();
}
reject(err);
},
});
});
}
建议新建一个js文件按模块存放请求url方法
import {request} from '../../common/net.js'//引入请求文件
//GET方式
//所传递的参数参考第一个代码段方式接收参数注释
export function GetBannerImg(param){//获取轮播图
return new request('/home/list'+param,null,true,'GET');
}
//POST请求
export function GetNews(param){//热门资讯
return new request('/home/news',param);
}
页面引入:
调用:
import {GetBannerImg,GetNews} from '../mainApi.js';
export default {
data() {
return {
bannerList:[],//轮播图列表
newsList:[],//热门资讯列表
}
},
onLoad() {
this.getNetWorkData();//请求接口
},
methods: {
//网络请求获取信息
async getNetWorkData(){
//请求获取轮播图
let bannerParam='?type=my';
//使用this.$to接收回调参数
let [err,res] = await this.$to(GetBannerImg(bannerParam));
if(err){
return
}
this.bannerList=res.data;
let param={
pageNum:1,
pageSize:8
}
//获取热门资讯
let [err1,res1] = await this.$to(GetNews(param));
if(err1){
return;
}
this.newsList=res1.data.records;
},
}
}
希望此文章能帮到您,欢迎留言交流,如转载请附上原文链接
更多推荐
已为社区贡献7条内容
所有评论(0)