uniapp自带的uni.request()可以直接进行网络请求,但每次用到就重写一次比较麻烦,这里进行一下简单的封装,方便以后接口的调用。
第一步
首先创建utils/requset.js文件,利用promise先对uni.request()做封装
const request = (config) => {
// 处理 apiUrl
config.url = '你的链接服务器地址' + config.url;
if(!config.data){
config.data = {};
}
let promise = new Promise(function(resolve, reject) {
uni.request(config).then(responses => {
// 异常
if (responses[0]) {
reject({message : "网络超时"});
} else {
let response = responses[1].data;
resolve(response);
}
}).catch(error => {
reject(error);
})
})
return promise;
};
export default request;
第二步
为了更进一步减少代码冗余,可以把请求放在一个api.js中写好,使用的时候直接调用方法就可以了
创建api/index.js文件
import request from '@/utils/request.js'; // 引入封装好的request
// 文章列表获取
export function getNavlist (data) {
return request({
method: "post", // 请求方式
url: '/dataApi/news/navlist.php', // 请求的url
data: data // 参数
})
}
最后一步
在相应的页面进行引用
//先引入
import {getNavlist} from '@/api/index.js';
//在对应的方法进行调用
getNavData(){
getNavlist().then(res=>{ //请求成功
console.log(res)
}).catch(res => { //请求失败
})
},
这就是uniapp封装网络请求的主要过程了,其实主要也就一个点,对promise的使用。