小程序request封装

小程序request封装,第1张

1、wx.request, https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

2、Promise,Promise 对象有以下两个特点:对象的状态不受外界影响。Promise 对象代表一个异步 *** 作,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着 *** 作成功完成。rejected: 意味着 *** 作失败。

WxRequest(),可以放在小程序启动页app.js里面。也可以重新生成一个js页面。在需要引用凳早的页面引入,如果是放枣烂雀在app.js里面的,在其他页面引入为 const app = getApp(),使用时 app.WxRequest(method,url,data)如果是一个新的js页面。则按照小程序的引入规则引入。使用方历谈法是差不多的。

一、在pages同级创建request文件夹 在此文件夹下创建一个index.js文件夹 在此文件夹内写入封装的api

const request = (method,url,params) =>{               // method (请求方式)     url (请求的路径)   params (请求的参数)

  return new Promise((resolve,reject) =>{             // 创建一个promise函数 

    let baseUrl = "公共url"

    uni.showLoading({                                               // 添加加载动画

        title: '加载中'

    })

    uni.request({                                                         // 发送请求

        url: baseUrl + url,                                           正圆  // url 形参就是传入的地址

        data: params? params:'',                               // 传入的请求参数

        method: method,                                            // 传入的请求方式

        success: res =>{                                           // 成功的函数

          resolve(res.data)

          uni.hideLoading()

        },

        fail: err =>{                                                 // 失败的函数

          reject(err) 

          uni.hideLoading()

 棚清颂       }

    })

  })

}

const api = {

  get: (url,params) =>request("GET",url,params),

  post: (url,params) =>request("POST",url,params)

}

export default api                                                // 抛出接口

二、在request 文件目录下 创建一个 home文件夹  在home 文件夹内新建index.js文件

// 所有的首页的请求 ,都放在这里维护

import api from '../index.js'

export const get = params => api.get('路径',params)              // get请求

export const post = params => api.post('路径',params)     链郑         // post请求

三、在所需要请求数据的页面内

import  请求名  from '文件路径'

我们在云开发过程中使用云函数,在请求前会做一点通用的事情(显示Loading),不可能每次都写,太麻烦了。

但是很多同学已经完成了项目,如果重新使用新的封装请求,会改很多地方,所以为了方便,我重写了微弯行信的callFunction方法

这个是主要工具方法,在app.js直接引入就可以了。

正常使用callFunction就可以了

内容判断还不够完善,如果需要睁笑更悉闹含新和新功能可 @我


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12415118.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存