uni-app统一封装管理API请求

王*

uni-app vue3

项目描述

uni-app的API请求封装统一管理请求接口

上传时间

2023.08.09

浏览人数

1000人
王*
河南省信阳市淮滨县
Hot:4189

在uni-app(HBuilder X)中,前端在写项目的时候进行前后端交互。我们要用到请求接口,进行对请求过来的数据进行操作。前端那么多接口,每一个接口我们都进行请求,会很麻烦以及后期不好维护。所以我们对api进行封装,后期只需要进行api文件就可以了 。

一.在已经建好的项目,在根目录下新建一个用来封装接口的文件(api),然后在文件里创建两个js文件(api.js  , request.js)。文件名字起什么都可以,只是不要过于离谱,要便于记住。 传给后端接口的数据大致有两种  纯文本数据 和 携带文件的数据(文件包括 照片 。。。)

        uni-app统一封装管理API请求



二.在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 文件 在这里修改 ,两种方式不能在同一个文件中存在。

文件名无所谓,只要自己方便记住就好。

uni-app统一封装管理API请求

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

},

 

}

   uni-app统一封装管理API请求



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

},


uni-app统一封装管理API请求


这样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请求


上传文件

uni-app统一封装管理API请求


到此 uni-app 的API接口统一封装管理完成。

5分

满分案例! 希望继续输出高质量的案例! 小提醒:注释可以再完善下
web 天津web培训 PS AJAX JQUERY 天津web培训 天津web前端培训 web培训 web前端培训 CSS jQuery 天津web前端培训班 天津web前端培训 CSS jQuery 天津web前端培训 天津web培训 天津web培训哪家好 VS Code WebStorm 天津web前端培训 web前端培训 web前端 VS Code WebStorm Dreamweaver、Visual 天津web前端培训 web前端培训 web前端 前端开发培训 VS Code DreamWeaver 天津web前端培训 web前端培训 天津前端培训 天津web培训 web前端 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 WebStorm Eclipse Editplus 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 AndroidStudio Eclipse Xcode Web Storm 天津WEB前端培训 天津WEB培训 天津前端培训 天津WEB前端培训班 Dreamweaver HBuilder Visual Studio Code 天津web前端培训 天津web培训 web前端开发培训 天津前端开发培训 Dreamweaver HBuilder Visual Studio Code 天津web前端培训 web前端培训 天津web前端培训班 天津web前端培训机构 Visual Studio Code Sublime Text WebStorm Ecli 天津web前端培训 天津web前端培训机构 web前端开发培训 天津web培训 Dreamweaver HBuilder Visual Studio Code 天津web前端培训 天津web前端培训机构 web前端培训 web前端培训班 Dreamweaver HBuilder Visual Studio Code 天津web前端培训 天津web前端开发培训 天津web培训 天津前端开发培训 HBuilder Visual Studio Code Sublime Text WebS 天津web前端培训 天津web前端培训机构 天津web前端培训学校 Dreamweaver HBuilder Visual Studio Code 天津web前端培训 天津web前端培训机构 天津web前端培训班 天津web前端培训学校 web java python 天津web前端培训 天津web前端培训班 天津web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训机构 天津web前端培训学校 web前端培训 web java python 天津web前端培训 天津web前端培训机构 web前端培训班 web前端培训 web java python 天津web前端培训 天津web前端培训班 天津web前端培训机构 web前端培训学校 python java web 天津web前端培训 天津web前端培训学校 web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训机构 天津web前端培训班 web python java 天津web前端培训 天津web前端培训学校 web前端培训班 web python java 天津web前端培训 天津web前端培训班 web前端培训 web java python 天津web前端培训 天津web前端培训班 天津web前端培训机构 web前端培训 web python java 天津web前端培训 天津web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训班 web前端培训 web java python 天津web前端培训 天津web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训班 web前端培训 web java python 天津web前端培训 天津web前端培训班 web java python 天津web前端培训 天津web前端培训机构 web前端培训 web java python 天津web前端培训 天津web前端培训班 web前端培训机构 web python java 天津web前端培训 天津web前端培训班 web java python 天津web前端培训 天津web前端培训班 web java python 天津web前端培训 天津web前端培训哪家好
王*    4189 河南省信阳市淮滨县 设计师杨冰是女孩 2001.**.**
本网站已在中国版权保护中心登记了美术作品著作权与软件著作权违者将依法追究责任,特此声明! | Copyright©2013-2022,zhuzuoji.com | 诚筑说培训学校(天津)有限公司内容支持 | 京ICP备17020986号-5