weex的网络请求：stream的fetch

weex用于网络请求的公共对象是stream。stream有个成员函数fetch()，其作用类似ajax。用法如下：

1. 引入stream对象：

var stream = weex.requireModule('stream');

2. 调用stream.fetch()进行请求：

设请求地址是：http://127.0.0.1:8080:MyTest/getTest

参数是：

{
parm0: 0,
parm1: 'abc'
}

① get：

var GET_URL = 'http://127.0.0.1:8080:MyTest/getTest?parm0=0&parm1=abc';
stream.fetch({
    method: 'GET',
    url: GET_URL,
    type:'jsonp'
}, function(ret) {
    console.log(ret);
    if(!ret.ok) {
        console.log('get request failed');
    }else{
        console.log('get:'+ret);
    }
}, function(response) {
    console.log(response);
});

② post：

var POST_URL = 'http://127.0.0.1:8080:MyTest/getTest';
var postBody = 'parm0=0&parm1=abc';
stream.fetch({
    method: 'POST',
    url: POST_URL,
    body: postBody,
    type:'jsonp'
}, function(ret) {
    console.log(ret);
    if(!ret.ok){
        console.log('post request failed');
    }else{
        console.log('post:'+ret);
    }
}, function(response) {
    console.log(response);
});

注意：

1. get直接将参数拼接到请求的URL中，get不支持body属性；post将参数放在body中。

2. post的body属性必须是一个字符串对象，不接受JSON对象，也不接受JSON.stringify()后的JSON对象。该字符串对象的格式与get的参数格式相同，即：'parm0=0&parm1=abc'。

3. 对于特殊字符，例如#$%，±，中文等，使用get来发送是不行的，必须使用post发送。

4. get与post均会对请求结果进行一次封装。服务端返回的数据会被封装到回调的data中。例如上面的回调返回ret，则服务端的返回数据是在ret.data中。

5. get与post均有两个回调，第一个回调是请求结束后最终的返回结果；第二个回调是请求过程中的请求进度。

有关于跨域访问：

当调用fetch进行请求时，可能会遇到跨域访问的问题。将type由json改为jsonp并不会解决该问题。

该问题主要依赖服务端来解决。若服务端是java，则在controller前加注解：

@CrossOrigin(origins = "*", maxAge =3600)

即可解决。但相应地，安全性会降低。

跨域访问仅会发生在web端。当用安卓调用接口时，相同的代码，不会出现跨域访问问题。

weex的网络请求：stream的fetch

猜你喜欢