封装uni-app中uni.request()

是什么?
答:封装uni-app项目中uni.request() 发送异步请求。
为什么?
1.之前写vue项目引入axios,为了统一url前缀 会采用 axios.defaults.baseURL="http://192.168.1.1:5000";
(当然vue项目中也可以二次封装axios)
这样切换线下测试,发布线上不用一一去改了,(一一改不要太坑自己了)
2.后台相应状态码 1 or 0 来判断相应是否成功 (根据自己后端数据来写) 来写
如果是1 or 0 或者 error 来做统一操作 都来做统一的操作
如果写了大半个一个项目 项目经理想要改 请求数据 或者 发送数据 的提示语 (说实话我挺烦这样的项目经理) 只需
更改封住函数就ok
怎么做?
/*
	1.创建一个api.js 文件
	2.创建一个常量 conset BASE_URL作为默认url地址
	3.将封装好的方法导入出去
 */ 
// 创建默认地址 url 常量 
 const BASE_URL = "http://localhost:8082"
 // 将封装好的函数导入出去
 // {url, method, data} 结构参数
 export const myRequist = ({url,method,data}) => {
 // return  promise 从而可以实现promise异步操作
return new Promise((resolve, reject)=>{
	uni.request({
		// 传入的url地址 
		url: BASE_URL + url,
		// 请求方法可填可不填(get)
		method: method || "get",
		// 请求数据可填可不填 默认空对象
		data: data || {},
		// 响应成功回调函数
		success: (res)=>{
		// 配置统一的 相应结果 如果 !=0(失败) 将会统一的提示动作
			if(res.data.status != 0){
				return uni.showToast({
					title: "获取数据失败",
					icon:"none"
				})
			}
			// 将请求结果resolve出去
			resolve(res);
		},
		// 如果error也会统一的提示
		fail: (err)=>{
			return uni.showToast({
				title: "请求接口失败",
				icon:"none"
			})
			reject(err)
		}
	})
})
}

// 怎么使用 ?
// 这个方法会在每个有后台数据的页面都会使用所以每个页面都引入的话比较麻烦(喜欢的话当我没说!)
// 我们将这个方法放入vue原型对象中 (看不懂的可以复习去了)
// 在main.js 中
import {myRequist } from "./util/api.js"
Vue.prototype.$myRequist = myRequist
// 这样我们就能通过vue原型对象取出这个方法从而调用
// 比如请求轮播图
getSwipers(){
		// 这里没写请求方法和请求数据 都会采用默认 上边封装好的
			this.$myRequist({
				url: "/api/getlunbo"
			}).then(res => {
				this.swipers = res.data.message
			})
		}

如有项目有别的需求可以继续在封装函数添加功能

  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值