微信小程序 使用 fly接口请求框架

fly简介

微信小程序的 javascript运行环境和浏览器不一样，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，因此不能在脚本中使用window，也没法在脚本中操做组件，JsCore中也没有 XmlhttpRequest对象，因此jquery 、zepto、axios这些在小程序中都不能用，而此时，正是 fly 大显身手的时候。

详细API，移步官方文档： flyio帮助文档.

使用步骤

1. 从官网下载wx.umd.min.js或者wx.js文件，保存在项目中。不建议使用cdn连接，防止连接失效。wx.js中有适配小程序请求的方法，有兴趣的能够本身研读，官网也有详细介绍。
2. 封装一个fly请求

import Fly from './wx.umd.min.js';
// 将一些全局变量存在app实例的globalData中
const app = getApp();
const baseApiUrl = app.globalData.baseApiUrl;
const application = app.globalData.application;
// 定义一些接口状态码须要提示的文案，用做错误提示
const statusText = {
    0: '网络链接异常',
    1: '网络链接超时',
    401: '用户未登陆',
    403: '无权限访问该资源',
    404: '资源不存在',
    405: '请求方法不容许',
    500: '网络异常，请检查网络',
    503: '服务不可用',
    504: '网关超时'
};

const fly = new Fly();
// 统一配置请求baseUrl
fly.config.baseURL = baseApiUrl;
// 统一配置超时时间
fly.config.timeout = 5000;

// 请求拦截，在这里面作一些个性化配置
fly.interceptors.request.use((request) => {
    /** * 演示： * 给全部请求的请求头加端application标识（若是应用场景不须要就不用些） */
    request.headers = {
        'application': application
    };

    /** * 演示： * 给全部请求参数添加application参数（若是应用场景不须要就不用些） */
    if (request.method === 'GET') {
        request.params.application = application;
    }
    if (request.method === 'POST' || request.method === 'PUT' || request.method === 'DELETE') {
        // 请求不传参数时，request.body为undefined
        if (request.body) {
            request.body.application = application
        } else {
            request.body = {
                application
            };
        }
    }

    // .....
    // .....
    // .....
    
    return request;
});

// 响应拦截，在这里面对接口响应作处理。
fly.interceptors.response.use((response, promise) => {
        return promise.resolve(response.data);
    }, (err, promise) => {
        let msg;
        msg = err.response.data.message ? err.response.data.message : (statusText[err.status] ? statusText[err.status] : '请求数据失败,请稍后再试');
        // 详细缘由，可参照另外一篇文章。
        wx.showToast({
           title: msg,
           mask: true,
           icon: 'none',
           duration: 2000
        });
        return promise.reject();
    }
);

export default fly;

1. 定义接口方法（也能够直接在js文件中直接使用，不过直接使用看起来代码不整洁，并且接口定义查找，大项目建议统一文件管理）

import fly from './fly/fly';

// 订单模块调用的接口
// post, get, delete, put请求方式以下：
const order = {
   getTyreOrderCount: (data) => fly.delete('/lynx-goods/api********', data),
   cancelTyreOrder: (data) => fly.put('/lynx-goods/api********'', data),
   getTyreOrderList: (data) => fly.get('/lynx-goods/api/api********', data),
   getDrawPopup: (data) => fly.post('/api********'', data),
   //......
};

export default order;

1. 调用封装后的请求

import api from '../../request/order';
const data = {
   // ...
}
api.getTyreOrderCount(data).then((res) => {
   	 // 成功时数据处理
     console.log(res);
   }).catch(err => {
     // 失败时的处理
  	 console.log(err);
   });
})

5.至此一套完整的fly使用过程就差很少啦。不过fly也不是全能的，阅读他的源码能够发现该请求框架只能实现通常请求的请求方法（get，post，put， patch，head，delete），不能支持微信小程序一些独有的api（好比上传文件的wx.uploadFile方法），这个时候咱们就只能再封装一个原生的微信小程序请求了。使用的时候只须要导入这个方法，wxRequest.uploadFile(’****’, url)便可。

let wxRequest = {
  uploadFile: function (url, filePath) {
      return new Promise((resolve, reject) => {
          wx.uploadFile({
              url: baseApiUrl + url,
              filePath: filePath,
              name: 'multipartFile',
              header: {
                  'content-type': 'multipart/form-data',
                  'Authorization': '***',
                  'application': application
              },
              success(res) {
                  if (res.statusCode < 400) {
                      resolve(res);
                  }
                  reject(res);
              },
              fail(res) {
                  reject(res)
              }
          })
      })
  }
}
export default wxRequest;

flyio源码解析

Fly对小程序的支持其实是经过自定义 http engine的方式，咱们来看一下wx.js源码：

//微信小程序入口
var  Fly=require("./fly")
var EngineWrapper = require("./engine-wrapper")
var adapter = require("./adapter/wx") //微信小程序adapter
var wxEngine = EngineWrapper(adapter)
module.exports=function (engine) {
    return new Fly(engine||wxEngine);
}

能够看出，关键代码就在adapter/wx中，咱们看看微信小程序的adapter代码：

//微信小程序适配器
module.exports=function(request, responseCallback) {
    var con = {
        method: request.method,
        url: request.url,
        dataType: request.dataType||"text",
        header: request.headers,
        data: request.body||{},
        success(res) {
            responseCallback({
                statusCode: res.statusCode,
                responseText: res.data,
                headers: res.header,
                statusMessage: res.errMsg
            })
        },
        fail(res) {
            responseCallback({
                statusCode: res.statusCode||0,
                statusMessage: res.errMsg
            })
        }
    }
    //调用微信接口发出请求
    wx.request(con)
}

这就是全部的实现。fly正是经过不一样的adpter来支持不一样的环境，至于其它的环境，咱们彻底能够同样实现~~~

ヾ(◍°∇°◍)ﾉﾞ~