uniapp中request的用法

写一个简单的request请求。

        这几天在写一个demo,请求接口突然不知道用哪种方式请求了,主要是写法太多(哈哈~~~),上网一搜公说公有理,婆说婆有理,太多了。不知道相信谁的。

request是什么?

百度出来的。。。
   request 在编程和网络通信的上下文中,通常指的是一个发起请求以从服务器获取数据或向服务器发送数据的操作。在网络编程中,客户端(如一个Web浏览器或一个移动应用)会向服务器发送一个request,服务器在接收到这个请求后会处理它,并可能返回一个response作为响应。是 UniApp 中用于发起网络请求的 API。你可以使用它来从服务器获取数据或向服务器发送数据。。。。。(后面好多正确的废话。。。这里就不写了,可自行去搜索)
       在UniApp的上下文中,uni.request 是一个API方法,用于在UniApp应用中发起网络请求。它允许开发者指定请求的URL、请求方法(如GET、POST等)、请求头、请求体以及其他相关参数,并处理服务器的响应。
uni.request 通常用于以下场景:
  • 从远程服务器获取数据,如从RESTful API获取JSON数据。
  • 向服务器发送数据,如提交表单或上传文件。
  • 与第三方服务进行通信,如身份验证、支付等。
使用uni.request时,你可以设置请求的各种参数,如URL、请求方法、请求头、请求体等,并提供一个回调函数来处理服务器的响应。这个回调函数通常会在请求成功时接收一个包含响应数据的对象,或者在请求失败时接收一个包含错误信息的对象。

往下看正文。。。

发起一个GET请求并处理响应。

如果请求成功,success回调函数会被调用,并打印出服务器返回的数据。如果请求失败,fail回调函数会被调用,并打印出错误信息
uni.request({  
    url: 'https://api.example.com/data', // 请求的URL  
    method: 'GET', // 请求方法  
    success: function (response) {  
        // 请求成功时的回调函数  
        console.log(response.data); // 打印服务器返回的数据  
    },  
    fail: function (error) {  
        // 请求失败时的回调函数  
        console.error('请求失败:', error);  
    }  
});

发起 POST 请求并携带数据

uni.request({  
    url: 'https://example.com/api/submit',  
    method: 'POST',  
    data: {  
        key1: 'value1',  
        key2: 'value2'  
    },  
    success: (res) => {  
        console.log(res.data);  
    },  
    fail: (err) => {  
        console.error(err);  
    }  
});

在正常项目中,我们请求后端接口,如果这个项目有登录信息,或者用户信息,一般都会带上请求头,也就是header。

uni.request({  
    url: 'https://example.com/api/data',  
    method: 'GET',  
    header: {  
        'content-type': 'application/json', // 设置请求头  
        'Authorization': 'Bearer token' // 例如,设置授权令牌  
    },  
    success: (res) => {  
        console.log(res.data);  
    },  
    fail: (err) => {  
        console.error(err);  
    }  
});

如果是多人项目或者是一个大项目,或者你想写的让别人看上去是那么回事,还需要配置点信息,让人家觉得你很专业,不是那么业余,哈哈。。。

在main.js中或者在其他合适的地方设置全局的默认配置,这样你就不需要在每次请求时都重复设置它们,确实是那么回事。。。。

uni.request.setDefaultHeader({  
    'content-type': 'application/json',  
    'Authorization': 'Bearer token'  
});

这样,当你发起请求时,这些默认头会自动被加上,除非你在特定的请求中覆盖了它们。

在.env.development文件中或者在其他合适的地方还需要设置全局的默认配置,这里是请求接口地址的地方,还是那句话,让人家觉得你很专业,不是那么业余,哈哈。。。

最后res.data 通常包含服务器返回的数据。你需要根据 API 的文档来解析这些数据。有时,数据可能是 JSON 格式的字符串,你可能需要使用 JSON.parse() 来将其转换为 JavaScript 对象。

在 fail 回调函数中,你可以处理请求失败的情况。err 对象通常包含有关错误的详细信息,例如错误代码、错误消息等。

正常情况下,我们都是在promise中请求,不要问,我也不知道为什么。。。。

但是有些情况,需要设置超时设置

uni.request({  
    url: 'https://example.com/api/data',  
    method: 'GET',  
    timeout: 10000, // 设置超时时间为10秒  
    ...  
});

最后差不多就这样了吧。

uni.request 还支持其他选项,如设置请求的数据类型、是否携带凭证等。你可以查阅 UniApp 的官方文档来了解更多关于 uni.request 的详细信息和选项。

  • 18
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值