博客

封装小程序网络请求接口

小程序提供了异步请求的函数wx.request()，很方便，但在实际使用上代码还是不够灵活。

于是封装了一下网络请求的方法，总结了两种调用模式。

有欠缺部分欢迎提出指点，好让小弟改进~

在和app.js 同级别 建立common.js

放入以下代码

/**
 * 网络请求接口
 * @param {*} options 
 * @param {string} url 请求网址
 * @param {object} data 请求数据
 * @param {string} method 请求方法
 * @param {object} header 请求头
 */
export const httpRequest = options => {
  let {
    url,
    data = {},
    method = 'GET',
    header = {
      'content-type': 'application/x-www-form-urlencoded'
    }
  } = options
  return new Promise((resolve, reject) => {
    if (url === undefined || url === '')
      reject('url不能为空')
    try {
      wx.request({
        url,
        data,
        method,
        header,
        success: res => {
          if (res.statusCode === 200) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        fail: err => {
          reject(err)
        }
      })
    } catch (e) {
      reject(e)
    }
  })
}

方法一、全局直接调用

app.js中引入

import { httpRequest as http } from 'common'

app.js里添加

// 网络请求
http: http,

在页面JS方法中直接引用

app.http({
  url: 'https://xxx.com/xx/',
  data: {},
  method: 'GET'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

catch可去掉，只有当网络请求失败时才在这里显示错误信息

方法二、建立api文件夹，二次封装请求方法，简化请求流程

在小程序根目录创建文件夹api，里面再创建userInfo.js文件

放入以下代码

import { httpRequest as http } from '../common'

// 修改用户信息
export const update = (id, name) => {
  return http({
    url: 'https://xxx.com/xx/',
    data: {
      id: id,
      name: name
    },
    method: 'PUT'
  })
}

在页面JS中引用

import { update } from '../../../api/userInfo'

在页面JS方法中进行调用

update(1, '张三')
  .then(res => {
    if (res.code === 200) {
      let data = res.data
      console.log(data)
    } else {
      console.log(res)
    }
  })