小程序request请求封装

以上为本人的项目目录

1.首先在utils中创建request.js文件封装request请求,此封装带上了token,每次请求都会自带token,需要你从后端获取后利用wx.setStorageSync('token',返回的token),不使用的话就是空

直接复制即可,需要改一下请求地址,有些配置自己可根据实际情况修改,比如以下状态码的判断,根据你的具体返回。

javascript 复制代码
const app = getApp();
var baseURL ='http://192.168.110.249:8221';//将url定义在app.js缓存中,直接赋值也是可以的
var cookieToken =wx.getStorageSync('token') || ''; //本地数据从本地缓存中取出
/**
 * 统一封装的请求
 */
const Request = function request(option) {
  return new Promise(function (resolve, reject) {
    let header = {
      'content-type': 'application/json',
      "Authorization":  cookieToken //携带token在请求头中
    };
    wx.request({
      url: baseURL + option.url,
      method: option.method,
      data: option.data === undefined ? '' : JSON.stringify(option.data), // 如果data没有传入,就给空串,不然就序列化
      header: header,//请求头
 	    timeout:10000,//超时时间 5s
      success(res) {
        //请求成功,此处根据你的业务返回的状态码进行修改
        if (res.data.code === 200) {
          resolve(res);
        } else if (res.data.code === 500) {
          //登录状态失效,需要重新刷新数据
           reject('登录状态失效,需要重新刷新数据');
        } else {
          //其他异常
          reject('运行时错误,请稍后再试');
        }
      },
      fail(err) {
        //请求失败
        reject(err)
      }
    })
  })
}


//导出
module.exports = Request

2.创建api文件夹,在里面创建comment.js进行二次封装请求,引入刚刚创建的request.js文件,下图每个方法都是一个接口请求。

3.使用封装的接口。引入刚刚创建的comment.js,里面已经封装好了接口请求。

javascript 复制代码
import CommentApi from "../../api/comment"; //引入

page({
onLoad(){

   //调用封装好comment.js里的的firstEchat方法
   CommentApi.firstEchat({
           //里面是需要传递的参数,对应封装的时候方法里的参数datas
     }).then(res=>{

           console.log(res)

       })

   }





})
相关推荐
禾高网络9 小时前
开启环保新潮流:回收小程序系统功能介绍
java·大数据·小程序
2501_9159214312 小时前
详细解析,iOS 应用上架 App Store 的完整流程与指南
android·ios·小程序·https·uni-app·iphone·webview
微三云 - 廖会灵 (私域系统开发)12 小时前
小程序商城系统安全运维剖析:漏洞、风控与长效迭代方案
运维·小程序·系统安全
2501_9159184113 小时前
Xcode调试iOS应用内存管理与优化,识别泄漏与性能监控指南
android·ios·小程序·uni-app·cocoa·iphone·xcode
T011561813 小时前
独立开发者商单实战|商超门店小程序(自提 + 同城配送):小程序全端页面 & 业务流程总图汇总
微信小程序·小程序·个人开发·前端实战
T011561813 小时前
独立开发者商单实战|商超门店小程序(自提 + 同城配送)用户端 & 后台联动踩坑上篇
小程序
梦想的颜色15 小时前
UniApp 四端对齐实战:iOS App / Android App / 小程序 / H5 兼容坑点与完整解决方案|AI 辅助多端落地
android·ios·小程序·uni‑app·uniapp 四端适配·多端兼容·ai 生成 uni‑app
黄华SJ520it1 天前
二二复制定点裂变双轨商城系统开发:原理、架构与实战指南
运维·小程序·架构·系统开发
小码哥0681 天前
2026陪诊小程序与APP开发技术分析
大数据·人工智能·小程序
00后程序员张1 天前
使用Instruments工具深入分析iOS应用性能与启动时间优化
android·macos·ios·小程序·uni-app·cocoa·iphone