stream

stream

A series of stream api. It provides a network request.

API

fetch(options, callback,progressCallback)

Start a network request, use two callbacks to receive server’s response data.

Arguments

  • options(object): the request options, key value style dictionary.

    • method(string): the HTTP method GET or POST.

    • url(string): the request url.

    • headers(string): the HTTP request headers.

    • type(string): response type, ‘json’,’text’ or ‘jsonp’(same as ‘json’ in native implementation)

    • body(string): the HTTP body.

  • callback(function): A callback function whose argument is the response object of the request. Callback function will receive a response object.

    • status(number): response status code.

    • ok(boolean): true if status code is bewteen 200~299.

    • statusText(string): status text

    • data(string): response data. It’s a object if request option is json/jsonp, or (string) in other type value.

    • headers(object): response headers

  • progressCallback(function): A progress callback. This callback will be invoked before request finished.

    • readyState(number): Current request state.’1’:request connection opened;’2’:response headers received.;’3’:response data is loading;

    • status(number): response status code.

    • length(number): bytes of data have received. You can read full length of response from ‘headers’.

    • statusText(string): status text.

    • headers(object): response headers.

Note

  • Default Content-Type is ‘application/x-www-form-urlencoded’. (The type specified in fetch is the response type!)
  • You need to set the Content-Type header to ‘application/json’ manually if you want to post the json body.

Example

<template>
<div class="wrapper">
<div class="group">
<text class="title">Weex Star :</text>
<text class="count">{{weexStar}}</text>
</div>
<div class="group">
<text class="title">Vue Star :</text>
<text class="count">{{vueStar}}</text>
</div>
</div>
</template>
<script>
var stream = weex.requireModule('stream')
export default {
data () {
return {
weexStar: 'unknown',
vueStar: 'unknown'
}
},
methods: {
getStarCount (repo, callback) {
return stream.fetch({
method: 'GET',
type: 'json',
url: 'https://api.github.com/repos/' + repo
}, callback)
}
},
created () {
this.getStarCount('alibaba/weex', res => {
this.weexStar = res.ok ? res.data.stargazers_count : '(network error)'
})
this.getStarCount('vuejs/vue', res => {
this.vueStar = res.ok ? res.data.stargazers_count : '(network error)'
})
}
}
</script>
<style scoped>
.wrapper {
flex-direction: column;
justify-content: center;
}
.group {
flex-direction: row;
justify-content: center;
margin-bottom: 40px;
}
.title {
font-size: 45px;
color: #888888;
}
.count {
font-size: 45px;
font-weight: bold;
margin-left: 12px;
color: #41B883;
}
</style>

try it