uniapp网络请求封装及使用

uniapp网络请求封装及使用

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的使用。