微信小程序请求封装

小程序官方有自己网络请求的api,但这种写法不好去维护,耦合度太高,也容易出现回调地狱。

	wx.request({
	  url: 'test.php', //仅为示例,并非真实的接口地址
	  data: {
	    x: '',
	    y: ''
	  },
	  header: {
	    'content-type': 'application/json' // 默认值
	  },
	  success (res) {
	    console.log(res.data)
	  }
	})

封装:

  1. 新建一个api文件,里面创建一个configUrl.js和request.js两个js文件。
  2. configUrl.js里是用来放我们请求的域名的
	export default const configUrl = 'https://api.unit.com';
  1. request.js是用来封装请求的文件。这里我们使用es6的promise进行封装。首先引入configUrl ,然后在官方api基础上进行封装:
	import configUrl from './configUrl.js'
	export default function request(options){
		retun new Promise((reslove,reject)=>{
			wx.request({
			  url: configUrl+options.url,
			  method: options.method||'get',
			  data: options.data||{},
			  header: {
			    'content-type': 'application/json',
			    'Authorization': 'Bearer ' + wx.getStorageSync('token')
			  },
			  success (res) {
			    reslove(res)
			  },
			  fail(err){
			 	reject(err)
			  }
			})
		})
	}
  1. 在页面调用封装的请求
	import request from '/api/request.js'
	request({
		url:'/article-list',
		method:'get',
		data:{type:'social'}
	}).then(res=>{
	
	}).catch(err=>{
	
	})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值