前端快速简单封装接口
封装接口请求一直是前端一个必须要操作的步骤此文以小程序封装uni.request为例,如果需要Vue项目中详细封装接口,可查看5.封装axios1. 基础版 直接上代码在项目utils目录下新建request.js文件,用于封装请求// 此文以小程序封装uni.request为例/**封装请求接口* url: 请求路径* methods: 请求方式(get/post)* data: 请求参数
·
封装接口请求一直是前端一个必须要操作的步骤
此文以小程序封装uni.request为例,如果需要Vue项目中详细封装接口,可查看5.封装axios
1. 基础版 直接上代码
在项目utils目录下新建request.js文件,用于封装请求
// 此文以小程序封装uni.request为例
/*
*封装请求接口
* url: 请求路径
* methods: 请求方式(get/post)
* data: 请求参数
* header: 请求头
*/
// 后台基地址
const BASE_URL ='https//xxx.xxx.xx'
export default async function request ({url,method,data,header}) {
// 请求之前加==》loading
uni.showLoading({
title: '数据请求中...'
});
//解构拿到数据
let [error, res] = await uni.request({
url: `${BASE_URL}${url}`, // es6拼接url地址
method,
data,
header
})
if(!error) {
// 处理返回数据 根据实际情况解构数据
let { data: {message, meta} } = res
// 关闭loading
uni.hideLoading();
// 返回需要得数据
return {
msg: meta,
data:message
}
} else {
return []
}
}
封装完了 怎么用?
上代码
// 其他页面用
import request from '@/utils/request'
async getUserInfo () {
let {msg, data} = await request({
url: 'xxx/xxx',
data:{
a:'张三',
id:2
}
})
// 判断 赋值操作
};
2. (升级版) 封装到以上步骤 已经完成基本操作,
问题:但是每个页面要使用需要导入
解决:可以利用vue插件方法,继续回到utils下的ruquest文件封装中,添加如下代码
const MyRequest = {
install(Vue) {
Vue.prototype.request = request
}
}
export {MyRequest}
// 在main.js文件中 导入 注册
import {MyRequest} from '@/utils/request'
Vue.use(MyRequest)
怎么用
// 之后每个页面使用 就直接this 不用导出封装得js文件
async getUserData () {
let {msg, data} = await this.request({
url: 'xxx/xxx',
data:{
a:'张三',
id:2
}
})
// 判断 赋值操作
}
更多推荐
已为社区贡献5条内容
所有评论(0)