小程序的request封装

小程序当中的请求封装其实跟VUE的请求封装是一样的,相差不大,写法一致
那么这篇博客文章我们就说说小程序的封装

  • VUE 的封装我们都知道需要两个.js文件,在小程序当中同样也需要两个.js文件,一个公共路径文件以及一个各个页面商品的路径

1.首先我们在根目录下创建一个API文件夹用来存放我们的request请求的.js文件,在API当中创建两个.js文件,一个是公共路径文件:request.js,一个是单个页面路径文件:api.js

  • 先来封装request.js文件
	const BASE_URL = '项目当中的公共路径'
	const requestURL = (obj)=>{
	  return new Promise((resolve,reject)=>{
	    wx.request({
	      url: BASE_URL + obj.url,
	      method:obj.method || 'GET',
	      success:res=>{
	        resolve(res)
	      },
	      fail:res=>{
	        reject(res)
	      }
	    })
	  })
	}
	export default requestURL

在这个封装中我们还是用到了Promise来封装,在小程序的文档当中有这么个请求的封装,直接wx.request在其里面写入所需要的变量即可,在Promise中有两个回调函数,一个是请求成功,一个是请求失败的,
URL:头部const出的公共路径 + api所传递过来的拼接路径,
method:这个意思就是所传递的method的值是否有定义,如果定义是GET或POST,那么就根据api当中所定义的来执行,如果什么都没定义那就根据后面的 ‘GET’ 来执行,
最后在导出即可,当然这里面还可以加入loading动画

  • 第二部 就是我们的api的封装
	import requestURL from '../request'
	const getBanner = async ()=>{
	  let data = await requestURL({url:'small4/banner/list',method:'GET'})
	  return data
	}
	export  {
	  getBanner
	}

api的封装就是最后每个数据的请求的封装,在这个封装中需要引入request.js,数据路径的封装都知道需要使用到async,await来解决数据的异步操作,当然这个也不例外,最后在导出这个封装,在所需要的页面的.js中引入就可使用,


版权声明:本文为weixin_57774738原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>