当前位置:   article > 正文

uniapp框架小程序开发如何二次封装请求_uniapp vue3的网络请求封装

uniapp vue3的网络请求封装

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。本次讲解的是如何二次封装请求,不足之处可以评论指出

  1. //设置请求根路径
  2. const BASE_URL='https://uinav.com/api/public/v1/'
  3. //向外暴露一个方法,因为是异步请求所以这里用promise方法
  4. export const myRequest=(options)=>{
  5. return new Promise((resolve,reject) =>{
  6. uni.request({
  7. //请求根路径加传过来的路径
  8. url:BASE_URL+options.url,
  9. //请求方式传过来的,或者默认的GET
  10. method:options.method||'GET',
  11. //接收传过来的参数或空对象
  12. data:options.data||{},
  13. //获取成功了给个提示
  14. success: (res) => {
  15. if(res.data.meta.status!==200){
  16. return uni.showToast({
  17. title:'获取失败'
  18. })
  19. }
  20. //成功了返回结果
  21. resolve(res)
  22. },
  23. fail: (err) => {
  24. uni.showToast({
  25. title:'获取失败'
  26. })
  27. //失败了返回结果
  28. reject(err)
  29. }
  30. })
  31. })
  32. }
  33. //在路口文件main.js里导入这个方法
  34. import { myRequest} from './api.js'
  35. //将该方法挂载在原型上供全局使用
  36. Vue.prototype.$myRequest=myRequest

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/318467
推荐阅读