美文网首页
在uni-app中应用Flyio

在uni-app中应用Flyio

作者: 小李不小 | 来源:发表于2023-07-12 16:55 被阅读0次

    uni-app的网络请求API

    API

    • 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni,详见uni-app接口规范
      <meta charset="utf-8">

    网络请求

    uni-app封装了发起网络请求以及拦截器的API :

    发起请求: uni.request(OBJECT) 详情

    拦截器: uni.addInterceptor(STRING, OBJECT)

    Flyio

    <meta charset="utf-8">

    Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库

    它在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行

    特点:

    1. 提供统一的 Promise API。
    2. 浏览器环境下,轻量且非常轻量
    3. 支持多种JavaScript 运行环境
    4. 支持请求/响应拦截器。
    5. 自动转换 JSON 数据。
    6. 支持切换底层 Http Engine,可轻松适配各种运行环境
    7. 浏览器端支持全局Ajax拦截 。
    8. H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片

    引入fly

    let Fly
    //微信小程序
    //#ifdef MP-WEIXIN
    Fly = require('flyio/dist/npm/wx')
    //#endif
    
    //APP版本
    //#ifdef APP-PLUS
    Fly = require("flyio/dist/npm/weex")
    //#endif
    
    //支付宝小程序
    //#ifdef MP-ALIPAY
    Fly = require('flyio/dist/npm/ap')
    //#endif
    
    // H5版本
    // #ifdef H5
    Fly = require('flyio/dist/npm/fly')
    //#endif
    
    let fly = new Fly()
    

    在uni-app中使用

    uni-app 中您也可以将fly实例挂在vue原型上,这样就可以在任何组件中通过this方便的调用:

    var Fly=require("flyio/dist/npm/wx") 
    var fly=new Fly
    ... //添加全局配置、拦截器等
    Vue.prototype.$request=fly //将fly实例挂在vue原型上
    

    在组件中您可以方便的使用:

    this.$request.get("/test",{xx:6}).then((d)=>{
          //输出请求数据
          console.log(d.data)
          //输出响应头
          console.log(d.header)
        }).catch(err=>{
          console.log(err.status,err.message)
        })
    

    拦截器封装

    Fly支持请求/响应拦截器,可以通过它在请求发起之前和收到响应数据之后做一些预处理

    //添加请求拦截器
    fly.interceptors.request.use((request)=>{
        //给所有请求添加自定义header
        request.headers["X-Tag"]="flyio";
        //打印出请求体
        console.log(request.body)
        //终止请求
        //var err=new Error("xxx")
        //err.request=request
        //return Promise.reject(new Error(""))
      
        //可以显式返回request, 也可以不返回,没有返回值时拦截器中默认返回request
        return request;
    })
     
    //添加响应拦截器,响应拦截器会在then/catch处理之前执行
    fly.interceptors.response.use(
        (response) => {
            //只将请求结果的data字段返回
            return response.data
        },
        (err) => {
            //发生网络错误后会走到这里
            //return Promise.resolve("ssss")
        }
    )
    

    相关文章

      网友评论

          本文标题:在uni-app中应用Flyio

          本文链接:https://www.haomeiwen.com/subject/fcyiydtx.html