小程序对request方法二次封装

微信小程序跟支付宝小程序都提供了一个发起 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方法二次封装)