uni-app网络请求封装

JavaScript010

uni-app网络请求封装,第1张

请求结果

注意 :页面POST请求header需配置为 {'content-type' : "application/x-www-form-urlencoded"},如:

故,可对网络请求封装继续优化。

拓展:设置网络请求为同步可参考 Promise 封装 。大致可分为三种方案:请求嵌套(异步方式的成功回调里获取数据后再采用异步方式请求)、promise 或者await,具体实现可自行实践,这里不详细叙述。

(1) 未封装前index.vue页面使用

备注:后台返回的data值如下

打印结果: uniapp上传文件api返回的data是字符串类型,需先将data转换为json对象,之后再取里面的值 。

(2) main.js中封装网络请求

(3) 封装后index.vue页面调用

(1) http.js

(2) 单页面引入js文件并调用

(3) 全局引入js文件并调用

看你跟其它用户的交流,大概的意思就是在打开页面的时候,发送一次页面请求,请看代码:

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8"/>

    <title>DemoJavascript</title>

</head>

<script type="text/javascript" src="

<body>

<div>

This is your code.

</div>

</body>

<script type="text/javascript">

$(document).ready(function(){

var url = 'htttp://

// 这是你要发送请求的URL地址

setTimeout(function(){

// post前需要引入jQuery库

$.post(url, {data:data}, function(r){ // data是你发送请求时传递的参数(Json格式)

/**

 * function里面的r是你发送请求后,返回的参数

 * 比如你发送请求后,返回status=1,info='Hello World!'

 * 返回后输出格式:

 * if(r.status == 1){

 *  alert(r.info)

 * }else{

 *  .....

 * }

 */

}, 'json')

}, 1000) // 1000是指:打开页面后1秒钟执行function里面的操作

})

</script>

</html>

代码内的链接地址被过滤掉了,你看看下面这张图

完整代码,可直接贴用!

你晕乎的是form的action属性&form的method属性&ajax的open的true这三个晕乎是吗?

首先最基础的,学web最基础的html中的form表单这个先给你讲一下。form的action和method这连个属性是form表单必不可缺少的,也是最重要的。

action的属性值是一个url,它指定了你的表单当单击submit按钮的时候提交到哪一个后台的控制器,比如哪一个servlet啊哪一个struts的action啊等等。当然这个action属性一般在某些应用里面呢会通过js来动态修改,这个再说。所以,action即动作嘛,有且只有一个用处,即单击submit后把请求连同参数提交到哪个后台的控制器,由你说了算。

再就是method,method中文意思就是方法。http协议的请求方法有很多,比如get post delete head options put等,其中最常用的是get和post。你的请求一些情况下特别是表单的请求一般都带参数对不对,比如username等于张三,password等于123。如果指定使用get,那么这些参数就会在请求发送的时候,那么这些参数就会被url编码后被连缀在浏览器地址栏的url后面,所以,get的特点,第一,不安全,第二,容量有限毕竟url长度是有限的。post呢,相对安全,且长度比较长。所以,method参数就指定发送请求到服务器的方式方法,一般就是get和post。

然后,说一下同步和异步这个东西,先独立于你的问题,先弄明白这两个概念的含义。

同步请求就是需要等到服务器的响应之后,前台才能继续原来的工作。比如前台发了一个请求给服务器,然后这时候前台的任何工作就冻结了,等着吧。此时,服务器在繁忙的处理,处理完了把结果返回给前台,前台继续执行。这样前台必须等待后台的处理结果,如果后台处理太慢那么前台就一直等着,等到了结果才能继续,此乃同步。

ajax的特色就在一异步,前台发了请求给后台,然后前台该干嘛干嘛,由单独的线程来监测后台的响应的返回。后台处理完了,返回前台,前台通过单独的线程来接受这个响应并处理,而且前台本身该做么做么,不需要等待服务器的响应和网络的延迟。此乃异步。

表单form的请求无论你的action设置的是神马,method是神马,都是同步请求,即请求发送到服务器,服务器响应一会,前台等着结果再做处理。

既然这种方式挺好的, 为么还需要异步?现在的互联网应用今非昔比,是富互联网应用时代,异步可以为我们带来更流畅的感觉更丰富的体验,好吧,跑题了,说你的问题。

open(method url true)

这个东西,首先这是js的原生的ajax(之所以是原生,是因为后面你学习前台框架比如jquery啊prototype啊会给你封装好ajax方便调用)代码,会发送一个ajax请求到后台。第一个参数method还用说吗,常用的非get就是post,特别要注意的是如果是get那么最后的send(x)方法也是要调用并且传递参数为null,如果是post那么在send这里传递参数即可。又跑题了。

url即和上面的action一样的含义。看到了这里,我想你差不多应该明白了,form的那两个属性你先弄明白什么意思,然后对应到open的前两个参数,好理解了吧。

最后就是第三个参数,如果是true那么代表异步,如果是false那么代表同步。虽然ajax的特点在于异步,但是同步也是经常使用的。

还有么问题么?请追问。