封装请求
解决的问题
- 很多页面中请求的
url前半部分都是一样的，重复书写导致页面代码冗余复杂同时逻辑容易不清晰，所以采用单独将请求封装成一个文件（模块）使得这些问题得到解决。
前期基础知识
具体步骤
创建文件夹及文件
- 在根目录下创建一个文件夹，名为
utils（可自行修改），在此文件夹下新建一个名为request.js（可自行修改）的文件。
分析request请求基本参数
url：请求地址
- 一般
url都是有一个固定前缀(域名)，只是后面不同。
https://xfxuezhang.cn:8080/village/v1/media/activity/newest
https://xfxuezhang.cn:8080/village/v1/media/activity/detail
https://xfxuezhang.cn:8080/village/v1/user/login
......
const baseUrl = "https://xfxuezhang.cn:8080/village/v1/";
method：请求方法const GET = 'GET';
const POST = 'POST';
const PUT = 'PUT';
const FORM = 'FORM';
const DELETE = 'DELETE';
header：请求头部
header的话根据method设置就行，默认如下。
let header = {
'content-type': 'application/json'
};
data：请求携带参数
GET请求直接传就可以。POST请求需要JSON.stringify(data)处理一下。
开始编写封装代码
- 编写请求的基本参数
const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';
- 编写
request函数封装请求function request(method, url, data) {
return new Promise((resolve, reject) => {
let header = {
'content-type': 'application/json'
};
uni.request({
url: baseUrl + url,
method: method,
header: header,
data: method === POST ? JSON.stringify(data) : data,
success: (res) => {
if(res.data.code === 0){
resolve(res);
} else {
reject('运行时错误,请稍后再试');
}
},
fail: (err) => {
reject(err);
}
})
})
}
- 创建多个请求
const Api = {
getActivity: (data) => request(GET, 'media/activity/detail', data),
getsiwper: () => request(GET, 'media/activity/newest'),
login: (data) => request(POST, 'user/login', data),
......
};
- 导出
Apimodule.exports = {
Api
}
module.exports = {
Api:Api
}
- 完整版代码
const GET = 'GET';
const POST = 'POST';
const baseUrl = 'https://xfxuezhang.cn:8080/village/v1/';
function request(method, url, data) {
return new Promise((resolve, reject) => {
let header = {
'content-type': 'application/json'
};
uni.request({
url: baseUrl + url,
method: method,
header: header,
data: method === POST ? JSON.stringify(data) : data,
success: (res) => {
if(res.data.code === 0){
resolve(res);
} else {
reject('运行时错误,请稍后再试');
}
},
fail: (err) => {
reject(err);
}
})
})
}
const Api = {
getActivity: (data) => request(GET, 'media/activity/detail', data),
getsiwper: () => request(GET, 'media/activity/newest'),
login: (data) => request(POST, 'user/login', data),
};
module.exports = {
Api
}
编写使用（引用）代码
- 以获取轮播图接口为例，在其他
.js文件里引入request.js下的Api。
const $api = require('../../utils/request.js').Api;
Page({
data: {},
onLoad() {
this.loadData();
$api.getsiwper().then((res) => {
console.log(res.data);
this.swiperList = res.data.data;
})
.catch((error) => {
console.log(error);
}
}
})
其他平台的请求封装类似，可以采用相同的步骤进行。
参考链接
|
