uniapp如何发起网络请求

这篇具有很好参考价值的文章主要介绍了uniapp如何发起网络请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

几种常见的请求方式:

jquery:
  $.ajax({
      url:"",// 路径
      type:"", //请求方式
      data:"", //请求参数
      success:function(){}, // 成功之后做的事情
      error:function(){} //失败之后做的事情
  })
底层使用的是js的异步请求

axios
  底层使用的promise
  let http=  axios.create({
       baseURL:"",//根路径
       timeout:"",//请求超时时间
       headers:"",//请求头
   })
  
  http({
      url:"",//路径
      method:"",//请求方式
      data:"",//请求参数 post
      parmas:""//请求参数 get
  }).then(()=>{
      // 请求成功做的事情
  }).catch(()=>}{
       // 请求失败做的事情   
 })

如何在小程序项目中发起网络请求:

小程序官方:不在像我们做vue中用axios发请求,微信官方使用wx.request

uniapp请求,uni-app,javascript,vue.js,前端

 官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

第一步:新建utils文件夹

uniapp请求,uni-app,javascript,vue.js,前端

 第二步: 在utils中新建 request.js

uniapp请求,uni-app,javascript,vue.js,前端

第三步:开始封装请求 

因为本人习惯采用vue2或者vue3使用promise请求方式,习惯使用async,await语法糖,所以微信也采用的这种方式

// 定义全局的url地址  根据不同后端修改地址  测试 正式 等
let baseUrl = "http://119.23.246.178:80"; //后端1
let baseUrl = "http://119.23.246.178:80";//后端2
let baseUrl = "http://119.23.246.178:80";//后端3
// 封装微信网络请求
let request =  (url,method="get",data={})=>{
  // 只有promise对象才能使用async await
  // new 一个promise其实就是一个回调函数
  return new Promise((resolve,reject)=>{
  // resolve成功之后做的事
  // reject失败之后做的事
  // 对象不能传值,url,method,data只有方法可以传值
  // 然后返回一个promise
  wx.request({
    url:baseUrl+url,  // 使用全局的url地址
    method,
    data,
   success: (res) => { //成功之后返回的结果
   			// resolve 成功之后做的事情  只需要拿到data的数据
   			resolve(res.data)
   		},
   		fail: (err) => {
   			// reject 失败之后做的事情
   			reject(err)
   		}
  })
})
}

export default {
	get(url,data){
		return  request(url,"get",data)
	},
	post(url,data){
		return  request(url,"post",data)
	},
	delete(url,data){
		return  request(url,"delete",data)
	},
	put(url,data){
		return  request(url,"put",data)
	},
}

注意:因为微信是不支持promise,所以就就new一个promise,但是对象又不能传值,所以return一个promise,解决传值的问题

第四步:组件使用方式

根目录下新建api文件夹,在文件夹新建模块js文件

uniapp请求,uni-app,javascript,vue.js,前端

import request  from "@/utils/request.js"
export const api_homeQuery = (data) =>{
  return request.get("/homeapi/index",data)
}

 第五步:组件引入

uniapp请求,uni-app,javascript,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-522837.html

到了这里,关于uniapp如何发起网络请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app:请求后端数据uni.request

     完整代码: 核心 使用的方法 uni.request({...});  与接口相连接的路径 注:这里标红的部分为全局变量 例如: url:\\\'https://域名/api/Produce/select_employee\\\'(表示在使用该域名下的api中的Produce文件的select_employee方法) url: getApp().globalData.position + \\\'Produce/select_employee\\\', 传入数据到后端 

    2024年02月16日
    浏览(49)
  • uni-app封装的request请求

    config.js    main.js 页面使用:

    2024年02月12日
    浏览(37)
  • 【UniApp】-uni-app-打包成网页

    经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。 除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文

    2024年02月04日
    浏览(72)
  • uni-app项目封装http请求和不封装请求

    在页面文件中 该请求的封装方式适用于_gt、_mt类型的请求,应该也可以做到其他类型; 注意看代码中的注释 在uilt/api.js中 在uilt/http.js中 在页面文件中 注意看代码中的注释;不封装需要使用 uni.request这个API来进行请求

    2024年02月13日
    浏览(53)
  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(64)
  • uni-app 使用uni.request封装发送api请求文档服务器请求导航守卫

    前言 刚刚接触uni-app时候想着直接使用axios发请求,可以发送成功但是请求头有点问题 后面发现教程都是使用@escookrequest-miniprogram三方包发送请求-(浏览器环境发送不了请求,不兼容) 为什么不直接用uni.request()发送请求,是因为每次请求都要写一次添加请求头不合理 后面

    2024年02月16日
    浏览(57)
  • uni-app 使用@escookrequest-miniprogram请求发送

    前言 在使用uni-app开发小程序时候发现axios添加请求头时在实际网络请求时并没有添加进去 后面发现是有第三方包@escookrequest-miniprogram代替axios发送请求的,请求头也添加正常。 注意是这个包也是在外层包了一层data,但好像并不能统一处理掉。 代码实现 1.下包@escookrequest-min

    2024年02月13日
    浏览(45)
  • uni.app开发小程序如何获取当前经纬度、位置信息以及如何重新发起授权定位

    amap-wx.js 文件 (也可去高德官网下载)

    2024年02月16日
    浏览(60)
  • uni-app开发微信小程序真机调试请求超时&请求被拒绝

    uni-app开发微信小程序真机调试请求超时请求被拒绝 在利用uni-app开发小程序时,写好的程序利用微信的模拟器进行调试时一切正常,但是一旦启用真机调试就会出现请求超时或者请求被拒绝的问题。如下图: 请求超时: errMsg: “request:fail fail:time out” errMsg: “request:fail -118:

    2024年02月12日
    浏览(60)
  • 【uni-app教程】四、UniAPP 路由配置及页面跳转

    uni-app 页面路由为框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同,如仍希望采用 Vue Router 方式管理路由,可在插件市场搜索 Vue-Router。 uni-app 有两种页面路由跳转

    2024年01月16日
    浏览(77)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包