小程序ajax封装

2017-08-08  本文已影响363人  回调的幸福时光

前言

微信小程序提供了网络请求方法,但是用起来不太方便,就自己封装了下。

封装源码

// 引用封装的API
import API from './_api.js'
export default {
  /**
  *   fetch是封装的请求方法
  *   参数: 
  *       url: 接口地址
  *       data: 参数
  *       method: 请求方式
  *       success: 成功后调用的方法
  *       fail: 失败后调用的方法
  */
  fetch (url, data, method, success, fail) {
    // 请求之前的任务 (loading等)
    const accessToken = wx.getStorageSync('userInfo');
    wx.request({
      url: url,
      data: data,
      header: {
        'content-type': 'application/json; charset=UTF-8',
        'Authorization': accessToken.sessionid // 用户token 信息
      },
      method: method,
      success: function (res) {
        // 隐藏loading
        success(res);
      },
      fail: function (res) {
        // 隐藏loading
        // 提示失败信息
        wx.showToast({
          title: '请求失败',
          image: '../assets/img/info.png',
          duration: 1500
        })
        fail(res);
      }
    })
  }
}

引用

import API from '../../utils/_api.js'
import HTTP from '../../utils/_http.js'
let that = this;
HTTP.fetch(API.baseUrl + API.xxx, {
    }, 'GET',
    function (res) {
       // success
        that.setData({
          // 修改数据
        })
    }, function (res) {
       // fail
    })

优化提示

以上只是简易版,可以对参数部分进行优化,传入一个对象字面量,之后对参数进行默认处理。

fetch (options) {
  // 参数默认处理
  options.url = options.url || '';
  options.data = options.data || {};
  ...
}
上一篇 下一篇

猜你喜欢

热点阅读