小程序api接口封装

首先在小程序根目录下创建一个 request文件夹。
然后再创建两个http.js和api.js文件

http.js

var serverUrl = "xxxxxx";
// 请求头处理函数
function CreateHeader(url, type) {
	let header = {}
	if (type == 'POST_PARAMS') {
		header = {
			'content-type': 'application/json'
			// 'content-type': 'application/json;charset=UTF-8'
		}
	} else {
		header = {
			'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
			// 'content-type': 'application/json;charset=UTF-8'

		}
	}
	if (exceptionAddrArr.indexOf(url) == -1) { //排除请求的地址不需要token的地址
		let token = wx.getStorageSync("authorize_token");
		header['access-token'] = token;
	}
	return header;
}
//post请求,数据在body中
function postRequest(url, data) {
	let header = CreateHeader(url, 'POST');
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + url,
			data: data,
			header: header,
			method: 'POST',
			success: (res => {
				if (res.statusCode === 200) {
					//200: 服务端业务处理正常结束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}
//post请求,数据按照query方式传给后端
function postParamsRequest(url, data) {
	let header = CreateHeader(url, 'POST_PARAMS');
	let useurl = url;
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + useurl,
			data: data,
			header: header,
			method: 'POST',
			success: (res => {
				if (res.statusCode === 200) {
					//200: 服务端业务处理正常结束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}
//get 请求
function getRequest(url, data) {
	let header = CreateHeader(url, 'GET');
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + url,
			data: data,
			header: header,
			method: 'GET',
			success: (res => {
				if (res.statusCode === 200) {
					//200: 服务端业务处理正常结束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}
//put请求
function putRequest(url, data) {
	let header = CreateHeader(url, 'PUT');
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + url,
			data: data,
			header: header,
			method: 'PUT',
			success: (res => {
				if (res.statusCode === 200) {
					//200: 服务端业务处理正常结束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}
//delete请求
function deleteRequest(url, data) {
	let header = CreateHeader(url, 'DELETE');
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + url,
			data: data,
			header: header,
			method: 'DELETE',
			success: (res => {
				if (res.statusCode === 200) {
					//200: 服务端业务处理正常结束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}
module.exports.getRequest = getRequest;
module.exports.postRequest = postRequest;
module.exports.postParamsRequest = postParamsRequest;
module.exports.putRequest = putRequest;
module.exports.deleteRequest = deleteRequest;

api.js

// 在这里面定义所有接口,一个文件管理所有接口,易于维护

import {
	getRequest,
	postRequest,
	putRequest,
	postParamsRequest
} from './http'//引入同级目录下的http.js

// 小程序登录
export const userLogin = data => postRequest(`/wechatUser/wx/login`, data);

然后在需要这个接口的页面引入当前api.js

import {
	userLogin
} from '../../request/api.js'

这样就把接口引进来了
下面就是如何在页面中调用这个方法

userLogin({需要传递的参数  xx:xx}).then(res => {
		接口请求成功
	}).catch(err => {
		接口请求失败
	})

好了,这样小程序api封装就完成了 快去试试吧

欢迎共同研究探讨(wx)
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值