美文网首页
小程序对request方法二次封装

小程序对request方法二次封装

作者: 疯子不需要风 | 来源:发表于2019-12-30 16:34 被阅读0次

    微信小程序跟支付宝小程序都提供了一个发起 HTTPS 网络请求的方法request,那么为了节省一些操作我们有必要对它进行一个二次的封装

    根目录创建api文件夹

    在api文件下创建request.js文件,然后引入getApp()、loading组件,同时使用文档上的方法创建:

    import * as loader from '../components/loading'
    
    export function request(config) {
        // 加载loading
        loader.showLoading()
        
        let port = app.globalData.address;
        // 解构赋值
        let {
          url = '',
          data = {},
          method = 'POST'
        } = { ...config }
        
        return new Promise((resolve, reject) => {
            my.request({
                url: port + url,
                method: method,
                data: {...data},
                success: (res) => {
                    loader.hideLoading()
                    resolve(res.data)
                },
                fail: (err) => {
                    loader.hideLoading()
                    reject(err)
                }
            });
        })
    }
    

    页面上使用方法

    一、在api文件下创建配置参数地址方法
    比如index首页需要请求接口,那么在api文件下创建getIndex.js,然后再创建提供调用的方法:

    import { request } from '../api/request'
    
    /* 商家信息 */
    export const getIndexData = (data) => {
        return request({
            url: '/DSP_API/video/getVideoDetail',
            method: 'POST',
            data
        })
    }
    

    这里以对象的方式传递过去,request拿到对象数据用es6解构赋值拿到对应的参数

    二、页面调用getIndex.js方法

    import { getIndexData } from '../../api/getIndex'
    
    let app = getApp()
    
    Page({
      data: {
    
      },
      onLoad() {
          this._getIndexData()
      },
      _getIndexData(){
          const data = {
            "video_id": "292"
          }
          getIndexData(data).then((res) => {
                  console.log(res)
          }).catch((err) => {
                  console.log(err)
          })
      }
    });
    
    

    相关文章

      网友评论

          本文标题:小程序对request方法二次封装

          本文链接:https://www.haomeiwen.com/subject/xuemoctx.html