封装js请求方式模块_小程序

110 阅读1分钟
  • 我们都知道如果在页面反复写一堆重复的代码会影响页面的加载速度,能简写就简写能少写就少写,但是功能不能少,真正的高质量代码是aabbcc组成的项目,并且完美跑起来毫无波澜!
  • 但是并不是所有的代码我们都可以简写,所以不是谁都可以写出高质量代码,不容易!!!
正题: 封装js请求方式模块_小程序 封装后代码量少 反复使用 类似ajax 超简单

**首先在utils文件中创建封装代码块的js文件,在文件中创建一个函数封装function 里面获取微信请求的代码块,将内容修改成options类型,比如url :options.url,success返回的信息写options.success(res) 然后抛出代码块 使用时在js文件中通过const {组件名} = require('导入封装的组件实际路径') 使用封装的组件时可以之间使用组件名({ url:'实际路径', method:'实际请求方式', data:{实际传递数据}, success(res)=>{ 获取请求到的数据信息 } })**

function request(options){
//加载显示loading
    wx.showLoading({
      title: '拼命加载中',
    })
    //封装的实际代码
    wx.request({
        url: options.url, //仅为示例,并非真实的接口地址
        data:options.data,
        method:options.method,
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(res)
          options.success(res)
        },
        //完成加载隐藏loading
        complete:()=>{
            wx.hideLoading()
        }
      })
}
//抛出request 在此组件可以简写
module.exports={
    request
}
//导入
const {request} = require('../../../utils/request')


方法名(){
        request({
            url:'https://www.escook.cn/api/color',
            method:'get',
            data:{},
            success:(res)=>{
            //获取到实际请求的数据
                console.log(res);
            }
        })
    },