小程序接口请求的初次封装

我们在写微信小程序中不管是用原生的微信开发者工具还是用uniapp 来开发 都需要用到数据的请求,在页面中大量的使用请求无疑会造成代码的冗余,也会给后期的维护带来很大的难度,因此在实际工作中或者自己练习中就需要将这些请求进行封装,以便于快速更改及维护,好了废话不多说了,直接上代码:

const http = ({url, method='get', data=''})=> {

wx.showLoading({ // 原生中开启loading 提示

title: '拼命加载中...', // 提示内容

mask: true //遮罩层

})

return new Promise((resolve, reject) => {

wx.request({ // wx.request 在 uniapp 中开发时 可以替换成 uni.request

url: '公共路径' + url, //拼接 需要请求数据的路径

method: method,

data: data,

success(res) { // 请求成功后的回调函数

resolve(res.data.data) // resolve将promise从进行中的状态转化为成功的状态的方法

wx.hideLoading() // 关闭loading 提示 uniapp 可以使用 uni.hideLoading()来关闭

},

fail(err) { // 请求失败的回调函数

reject(err)

wx.hideLoading() // 关闭loading 提示 uniapp 可以使用 uni.hideLoading()来关闭

         },

     })

  })

}

//es6 的导出方法

export default http


接下来在需要使用到请求的页面 直接引入

import http from '封装http的路径'

适合新手上路的就 直接 :http("请求路径").then(res=>{

console.log(res) 就可以啦

})

posted @ 2022-09-27 15:11  樱桃树下的约定  阅读(130)  评论(0编辑  收藏  举报
返回顶端