小程序ajax封装

前言

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

封装源码

// 引用封装的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 || {};
  ...
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 178,534评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,901评论 4 61
  • 前不久看了电影 一条狗的使命。片末说到,要活在当下,享受生活。那么,在人生中最美好的大学四年里,你是否做到了活在当...
    秋楚录秋阅读 636评论 0 3
  • 文/凡布 读冰心先生的诗文精选,是前几日在图书馆借来的书。这些日子北方的天气冷的厉害,让我想到去年冬天的这时节,我...
    栗子_栗子阅读 881评论 24 12
  • 三岛说,我们历代与时间交媾,在无尽的乱伦中世代延续。 骨架是肉体的框架,肉体由思想支配,吃喝为肉体的不衰提供能量,...
    小歌阅读 704评论 1 2

友情链接更多精彩内容