vue混合app开发框架_mpvue框架

vue混合app开发框架_mpvue框架1.npm安装npminstallflyio–save.2.src下新建utils/request.js文件importFlyfrom’flyio/dist/npm/wx’constfly=newFly()consthost=’https://rmall.ukelink.net’//添加请求拦截器fly.interceptors.request.use…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

1.npm安装

npm install flyio --save.

2.src下新建utils/request.js文件

import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()
const host = 'https://rmall.ukelink.net'
// 添加请求拦截器
fly.interceptors.request.use((request) => { 
   
  wx.showLoading({ 
   
    title: '加载中',
    mask: true
  })
  console.log(request)
  // request.headers["X-Tag"] = "flyio";
  // request.headers['content-type']= 'application/json';
  request.headers = { 
   
    'X-Tag': 'flyio',
    'content-type': 'application/json'
  }
 
  let authParams = { 
   
    // 公共参数
    'categoryType': 'SaleGoodsType@sim',
    'streamNo': 'wxapp153570682909641893',
    'reqSource': 'MALL_H5',
    'appid': 'string',
    'timestamp': new Date().getTime(),
    'sign': 'string'
  }
 
  request.body && Object.keys(request.body).forEach((val) => { 
   
    if (request.body[val] === '') { 
   
      delete request.body[val]
    };
  })
  request.body = { 
   
    ...request.body,
    ...authParams
  }
  return request
})
 
// 添加响应拦截器
fly.interceptors.response.use(
  (response) => { 
   
    wx.hideLoading()
    return response.data // 请求成功之后将返回值返回
  },
  (err) => { 
   
    // 请求出错,根据返回状态码判断出错原因
    console.log(err)
    wx.hideLoading()
    if (err) { 
   
      return '请求失败'
    };
  }
)
 
fly.config.baseURL = host
 
export default fly

3.main中引用到原型

import fly from './utils/request'
Vue.prototype.$fly = fly

4.使用

this.$fly.request({ 
   
      method: 'post', // post/get 请求方式
      url: '/mms/country/queryValidZoneListForMallHome',
      body: { 
   }
    }).then(res => { 
   
      console.log(res)
    })

关于请求拦截

比方说我们每次请求我们自己的服务器接口的时候需要带上appID,用户登陆后需要带上openId


// 请求拦截
fly.interceptors.request.use((request)=>{ 
   
 
  request.body.appId = 'xxx'
    // 用户的openId在获取之后添加到全局变量中如果存在,我们将它添加到请求参数里面
  let openId = Vue.prototype.globalData.openId;
  if(openId){ 
   
    request.body.openId = openId
  }
})

当服务器发生错误,或者用户网络错误导致请求失败的时候,我们可以添加一个响应拦截

// 响应拦截
fly.interceptors.response.use(
  (response) => { 
   
 
 
  },
  (err) => { 
   
    //发生网络错误后会走到这里
    //return Promise.resolve("ssss")
    wx.hideLoading();
    wx.showToast({ 
   
      title:'网络不流畅,请稍后再试!',
      icon:'none',
    });
 
  })
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/195969.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • javascript运算符的优先级

    最基木的运算符优先级就是所谓的“先乘除,后加减”。对于优先顺序处于同一层次上的运算符,按照从左到右出现的顺序计算。下面给出javascript定义的所有运算符的优先级。运算符优先顺序成员选择、括号、

    2021年12月21日
  • 10款Java小游戏(详解+源码)

    10款Java小游戏(详解+源码)开源Java小游戏前言下面就给大家介绍十几个开源的Java小游戏,供大家学习交流。资源都下载好共享到我的交流群了,需要的在群内自取862461829不收取任何资源费,毕竟开源才是我们的宗旨。【群里还含有:Java80g学习资料包+Java学习书籍+Java项目实战源码+安装软件等】各类资源都有哦~1.数字彩虹雨这是我比较喜欢的一个小应用,虽然代码比较简单但是喜欢那种简单的美。下面是运行截图,就是我们在黑客帝国里面见到的那种数字雨,运行时是全屏的。下面说说下载链接里面的东西.

  • linux添加用户及用户权限管理命令_docker用户权限

    linux添加用户及用户权限管理命令_docker用户权限Linux添加用户及用户权限管理1.新建用户(组)①用户新建用户需要通过指令useradd来实现。useradd的一些基本用法如下:useraddusername 新建一个用户useradd-uuidusername 指定用户的uiduseradd-ggidusername 指定用户的gid(一定要存在)useradd-Ggiduseradd指定用户的附加组(…

    2022年10月24日
  • JVM调优工具总结

    JVM调优工具总结一、jps:虚拟机进程状况工具它可以列出正在运行的虚拟机进程,并显示虚拟机执行主类(MainClass,main()函数所在的类)名称以及正在运行的本地虚拟机唯一ID(LVMID);它是使用率最高的一个JDK命令行工具,因为其他的命令行工具都需要输入查询到的ID来确定要监控的是哪一个虚拟机进程。命令格式:jps[options][hostid]选项作用-q只…

  • 微信小程序如何实现支付功能?看官方文档头疼(使用云函数的方式操作)「建议收藏」

    先来个效果图^_^微信支付功能,个人公众号是没有办法进行开发支付功能的,需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行大概500左右)公众平台的配置可以参考文档,这里主要是微信官网注册非个体公众号的否需代码操作。(也就是和我们码农相关的操作了)耐心看下面操作,基本上就是复制下面的代码(整个操作也就一会,基础再差也就30分钟搞定支付)^_^1.创建微信小程序2.在微信小程中序创建云函数1).根目录下创建一…

  • idea mybatisplus插件_idea的lombok插件安装

    idea mybatisplus插件_idea的lombok插件安装MybatisX

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号