• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序学习笔记二(持续更新)---小程序网络请求封装

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

写小程序的你是否已经厌倦了发送网络请求的wx.request?接着看吧。。。

一、目录结构


在项目同级目录下utils文件夹里新建一个fetch.js文件,(名字看自己喜好)

二、直接上代码

// 定义网络请求API地址
const baseURL = \'http://yourbaseURL\'
// 封装网络请求开始
const http = ({ url, data, method, ...other } = {}) => {
  let sessionKey = wx.getStorageSync(\'token\') // 以同步方式获取token避免异步操作出现延迟错误,具体可根据自己项目情况而定
  // 我这里需要在除了登录后的所有接口拼接token,因此判断了url是否为登录接口由此添加不同的url拼接方式,具体可根据业务逻辑完善代码
  var requestUrl = \'\'
  if (url === \'/login/wxLogin\') {
    requestUrl = baseURL + url
  } else {
    requestUrl = baseURL + url + "?sessionKey=" + sessionKey
  }
  // 添加请求加载等待
  wx.showLoading({
    title: \'加载中...\'
  })
  // Promise封装处理
  return new Promise((resolve, reject) => {
    wx.request({
      // 请求地址拼接
      url: requestUrl,
      data: data,
      // 获取请求头配置
      header: { \'content-type\': \'application/x-www-form-urlencoded\' }, 
      method: method,
      ...other,
      // 成功或失败处理
      complete: (res) => {
        // 关闭等待
        wx.hideLoading()
        console.log(res)
        // // 进行状态码判断并处理,退出登录
        if (res.data.code === 8888) {
          wx.navigateTo({
            url: \'/pages/login/login\',
          })
        } else if (res.data.code !== 0) {
          // 获取后台返回报错信息
          let title = res.data.msg
          // 调用全局toast方法
          showToast(title)
        } else if (res.data.code === 0) {
          resolve(res)
        } else {
          reject(res)
        }
      }
    })
  })
}
// 添加请求toast提示
const showToast = title => {
  wx.showToast({
    title: title,
    icon: \'none\',
    duration: 1500,
    mask: true
  });
}

// 进行url字符串拼接
const getUrl = url => {
  if (url.indexOf(\'://\') == -1) {
    url = baseURL + url
  }
  return url
}

// 重构请求方式
const _fetch = (content) => {
  return http({
    url: content.url,
    data: content.data,
    method: content.method
  })
}
module.exports = {
  baseURL,
  _fetch,
  showToast
}

三、使用:

1、文件最上面引入:

let api = require(\'../../utils/fetch.js\')

2、使用
api._fetch({
	url: \'/yourURL\',
	data: {yourData},
	method: \'get/post....\'
}).then((res) => {
	// 请求成功后的处理
	console.log(res.data)
	......
})

注意
1、promise为异步请求,在fetch.js中使用wx.getStorage获取token时,会比请求慢一步,因此会出现所取的token值有问题。小程序中在使用promise时使用同步的方式获取token--**wx.getStorageSync(\'token\') **
2、大多数业务并非选择url拼接token的方式发送请求,而是将token存入header中一并带入,示例 点击这里


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
在微信小程序中封装一个网络请求方法文件发布时间:2022-07-18
下一篇:
微信小程序网络请求的setDate发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap