小程序系列--网络库封装(二)

如何创建项目就不说了。接下来最好在项目中新建个文件夹，比如 ‘network’ ，将所有的网络操作的js文件全部放在这个目录下。

创建请求方法

新建文件 ‘HttpUtils.js’，然后定义方法 handleRequest

function handleRequest(req) {
}

这里将请求中需要的参数全部放在 req 对象中，需要什么就从这个对象中取就可以。

function handleRequest(req ) {

  if (!req) return; //简单判断，防止空指针(然而js不会出现空指针这个异常，顶多不执行后面代码，习惯使然....)
  //加载对话框，loading
  wx.showLoading({
      title: '拼命加载.... ',
  });
  //发起请求
  wx.request({
    url: req.url,
    data: req.data,
    header: getHttpHeader(), //后面在说这个
    method: "POST", //统一请求用POST方式，也可以自己定义
    success: function (res) {
            //网络成功
    },
    fail: function (res) {
            //网络失败
    })
}

• req.url 当前接口的URL
• req.data 接口传递的参数，其实就是个js对象
• getHttpHeader() 获取请求的header，也是个js对象
• success() 请求访问成功的回调【注意：这个是方法】
• fail() 请求失败的回调 【注意：这个是方法】
• 其实就是在wx.request()中传了个对象，类似java的匿名类部类

HttpHeader

由于框架设计要求，所有的网络访问必须包含 userId ，token 字段，而这2个字段是登录之后才有的。所以在登录完成之后，要将这两个字段缓存起来。wx提供了缓存的api，且本地数据存储的大小限制为 10MB。

wx.setStorageSync(KEY,DATA)  //存
wx.getStorageSync(KEY)        //取

不知道是不是 sharedPreferences ，也可能是 cookie，反正是以键值对的形式存储的。如何存等登录以后再说，可以先取出来用用。

方法具体如下：

function getHttpHeader() {
  var userId = wx.getStorageSync(KEY_UER_ID);  //KEY_UER_ID  常量key
  var token = wx.getStorageSync(KEY_TOKEN);  //KEY_TOKEN   常量key

  return {
    'userId': userId,
    'token': token,
    'content-type': 'application/x-www-form-urlencoded'
  };
}

wx默认POST提交请求是以JSON的形式提交的，当前的框架是以表单形式提交，需要加上 content-type='application/x-www-form-urlencoded'

content-type 默认为 'application/json';

处理网络失败

在请求方法中，定义了处理成功与失败的方法，首先看看失败的方法。

fail: function (res) {
    //网络失败
})

如果被调了这个方法，一般都是网络错误，或者服务器宕机。所以这个错误提示比较简单。直接定义一个提示错误的Toast。

function showErrorToast(msg) {
  wx.showToast({
    title: msg ? msg : "服务器异常",
    icon: "none",
    duration: 2000
  });
}

然后调用即可，res.errMsg 是wx提供的错误提示。

fail: function (res) {
  wx.hideLoading();
  showErrorToast(res.errMsg);
}

接下来看下如何处理请求成功
gitHub源码