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
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
第一步:新建utils文件夹
第二步: 在utils中新建 request.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文件
import request from "@/utils/request.js"
export const api_homeQuery = (data) =>{
return request.get("/homeapi/index",data)
}
第五步:组件引入
更多推荐
已为社区贡献3条内容
所有评论(0)