uni-app统一封装管理API请求
王*
uni-app vue3
项目描述
uni-app的API请求封装统一管理请求接口
上传时间
2023.08.09
浏览人数
566人
王*
河南省信阳市淮滨县
Hot:2953
在uni-app（HBuilder X）中，前端在写项目的时候进行前后端交互。我们要用到请求接口，进行对请求过来的数据进行操作。前端那么多接口，每一个接口我们都进行请求，会很麻烦以及后期不好维护。所以我们对api进行封装，后期只需要进行api文件就可以了 。
一．在已经建好的项目，在根目录下新建一个用来封装接口的文件（api），然后在文件里创建两个js文件（api.js , request.js）。文件名字起什么都可以，只是不要过于离谱，要便于记住。 传给后端接口的数据大致有两种 纯文本数据 和 携带文件的数据（文件包括 照片 。。。）
二．在request.js封装公共请求头 （纯数据传参 ）
1.
const BASE_URL = "http://121.199.79.61:8888" //公共请求头地址
const request = (url, method, data) => {
let token = uni.getStorageSync('token') //token
// console.log("token:", token);
return new Promise((resolve, reject) => {
uni.request({
url: BASE_URL + url, // 开发者服务器接口地址
method: method, //请求方式
timeout: 60000, //请求超时时间
data: data, //请求的参数 data 为普通传参变量 不可以传携带文件的参数
header: { //设置请求的 header
'Content-Type': 'application/json',
'token': token, //自定义请求头信息token
},
success(res) { //对请求请求到的信息进行处理
// console.log(res.data)
if (res.data.status == 1) {
if (res.data.token) {//更新token
uni.setStorageSync("token", res.data.token)
resolve(res.data)
}else{
resolve(res.data)
}
}
else {
uni.showToast({
title: '请求失败,请重新获取数据',
icon: 'none'
});
// uni.navigateTo({
// url: "/pages/login/login"
// })
}
},
fail(err) {
reject(err)
}
})
})
}
export default {
request,imgApi //向外暴露request
}
2. 我们要复制一份reque.js 文件 在这里修改 ，两种方式不能在同一个文件中存在。
文件名无所谓，只要自己方便记住就好。
const BASE_URL = "http://169.254.113.120:8080" //公共请求头地址
const request = (url, data, filePath, fileName) => { // filePath为上传文件的地址 fileName为上传文件的文件名
let token = uni.getStorageSync('token') //token
return new Promise((resolve, reject) => {
console.log("other", data); // 传给后端的数据
uni.uploadFile({ // 上传文件的请求方式
url: BASE_URL + url, // 开发者服务器接口地址
filePath: filePath,
name: fileName,
timeout: 60000, //请求超时时间
formData: data, //请求的参数 formData 是上传文件的变量名 固定 不可修改 普通的为 data
header: { //设置请求的 header
// 'Content-Type': 'application/json',
'token': token, //自定义请求头信息token
},
success(res) { //对请求请求到的信息进行处理
// console.log(res.data)
if (res.data.status == 1) {
resolve(res.data)
} else {
// uni.showToast({
// title: '请求失败,请重新获取数据',
// icon: 'none'
// });
// uni.navigateTo({
// url: "/pages/login/login"
// })
}
},
fail(err) {
reject(err)
}
})
})
}
export default {
request
}
三．api.js里面存放api方法 （直接复制就好了， 所有的api都在api.js 配置好之后在页面调用就好了）
import request from './request.js' //引入request.js
const api = request
export default {
// 手机号或id加密码登录
allOffice: () => {
let user = api.request('公共请求头已经封装好了，这里只要写后面的地址就行了', 'GET', {
})
.then(res => {
// console.log(res); //正常的数据 传给后端数据时，后端接口返回的数据内容
return res
})
return user
},
}
getRegister: ( data, filePath ) => { // 上传文件给后端数据的变量名
// (url, data, filePath, fileName)
let user = apiFile.request('/webapi/register',data ,filePath, 'avatarFile')
// filePath 上传文件的地址变量 avatarFile 上传文件的名字
.then(res => {
// console.log(res); //正常的数据
return res
})
return user
},
这样api接口封装完成。
四．示例 （我们每封装一个api，就可以在api.js里面配置好拿到页面里去用了）
1 import Api from "@/api/api.js"; //引用
2 methods:{
test() {
Api.allOffice().then((r)=>{
console.log("请求OK：");
console.log(r);
});
}，
select(e) {
console.log('选择文件：', e); // 选择要上传的文件
this.avatarFile = e.tempFilePaths[0];
},
submitForm(){
let _this = this;
let pra = _this.formData;
console.log(pra);
Api.getRegister(pra, _this.avatarFile).then((res) =>{
console.log(res);
uni.showToast({
title: res.msg,
icon: "success"
})
})
}
},
onLoad() {
this.test();
}
截图示例 普通
上传文件
到此 uni-app 的API接口统一封装管理完成。
王*
