【js】Flyio库 使用总结

flyio使用过程中，请求头请求参数可以全局配置好，也可以在全局配置过的情况下使用时做个性化单独配置，网址flyio，使用方法：

npm安装

cnpm install flyio

安装后使用，不同使用平台要做判断,app和微信小程序使用相同方式引入（本文件为request.js）：

let Fly= null
// #ifdef H5
Fly=require("flyio/dist/npm/fly")
// #endif
// #ifdef MP-WEIXIN || APP-PLUS
Fly = require("flyio/dist/npm/wx")
// #endif

let fly = fly = new Fly();
fly.config.baseURL = websiteUrl;   //websiteUrl:api请求url
fly.config.IMG_URL = imgUrl;     //图片显示url
fly.config.IMG_LOAD = imgload;  //图片上传url
fly.config.timeout = 100000;   //超时时间



//需要验证token需做请求拦截，不需要验证token则不需要以下代码
let newFly = new Fly();
newFly.config = fly.config

fly.interceptors.request.use(function(request) {
    let customer = uni.getStorageSync("customer")
    
    if(!customer){
              //这里可以判断是否登录，如果没有登录跳转登录页；
              // 可加上判断当前是否是登录页,如果是无需加跳转
        uni.redirectTo({
            url:'/pages/menu/home/home'
        })
        return
    }
    
    if(!request.headers['Content-Type']){    //如果单独配置过Content-Type，则不再赋值
        request.headers['Content-Type'] = 'application/json';
    }
    request.headers['token'] = customer.token?customer.token:'';    //请求头附加token数据
    request.body = request.body; 
});

fly.interceptors.response.use(function(response, promise) {

    //token失效，申请token
    if(response.data.error == 'token失效'){
        return newFly.get('/token.php',{}).then(function(res) {
            if(!res.data.error){
                                //请求成功，存储token
                uni.setStorageSync('customer',res.data)
            }else{
                uni.switchTab({
                    url:'/pages/menu/home/home'
                })
                return    //这里写return不太合适，因为如果不返回数据，请求完成then中的代码会报错，所以最好按钮返回的数据格式返回空数据！！
            }
            //重新生成token失效的请求，去请求数据
            return fly.request(response.request.url,response.request.body,{method:response.request.method});
        }).catch(function(err) {
            console.log(err)
        })
    }else{
        return promise.resolve(response.data);
    }
});
export {fly}

在apis.js中引入：

import {fly} from './request.js'

export default {
  // 登录注册
  login:function (params) {
    return fly.get("/login.php",params);
  },

  //等等......
}

封装api的好处在于可以统一管理api，uni app中则可以配置混淆为文件，防止app包被反编译api接口暴露不安全。main.js中：

import apis from './utils/apis.js';
Vue.prototype.$apis = apis

然后就可以使用啦：

let param  ={}
this.$apis.login(param).then(res => {
            //登录成功....
    }).catch(err=>{
        console.log(err)
        that.msgTip('登录失败')
    })