封装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
			})
		}

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

你可能感兴趣的:(前端,uniapp,封装请求方法,接口,ajax,uni-app,uni.request封装,全局方法配置,全局变量配置,接口调用的封装)