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

时间:2020-9-3 作者:admin


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来支持不同的环境,至于其它的环境,我们完全可以一样实现~~~

ヾ(◍°∇°◍)ノ゙~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。