User Tools

Site Tools


Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
js:jeyson [2018-11-13 16:06]
ziggi
js:jeyson [2018-11-14 14:52] (current)
ziggi
Line 81: Line 81:
 } }
 </​code>​ </​code>​
 +
 +====Browser module for Vue.js====
 +
 +<code javascript jclient.js>​
 +'use strict'​
 +
 +import jayson from '​jayson/​lib/​client/​browser'​
 +import axios from '​axios'​
 +
 +var createTransport = function(url) {
 +    return function(request,​ callback) {
 +        axios
 +            .post(url, request,
 +                    { transformResponse:​ [function (data) {
 +                        return data
 +                    }]}
 +            )
 +            .then(function(res) {
 +                callback(null,​ res.data)
 +            })
 +            .catch(function(err) {
 +                callback(err)
 +            })
 +    }
 +}
 +
 +export default function(url) {
 +    var transport = createTransport(url)
 +    return jayson(transport,​ {})
 +}
 +</​code>​
 +
 +===Usage===
 +
 +<code javascript App.vue>
 +
 +<​template>​
 +    <div>
 +        <button class="​button"​ v-on:​click="​getRandom">​Update</​button>​
 +        <p>
 +            <​pre>​{{data}}</​pre>​
 +        </p>
 +    </​div>​
 +</​template>​
 +
 +<​script>​
 +import jclient from '​./​jclient'​
 +
 +export default {
 +    data: function() {
 +        return {
 +            data: {}
 +        }
 +    },
 +    methods: {
 +        getRandom() {
 +            var client = jclient('​https://​api.random.org/​json-rpc/​1/​invoke'​)
 +            client.request('​generateIntegers',​
 +                {
 +                    apiKey: '​cd56b681-c001-4178-801e-53bxxxxxxxxxx',​
 +                    n: 3,
 +                    min: 10,
 +                    max: 99
 +                },
 +                (err, response) => {
 +                    if (!err) ​
 +                         ​this.data = response.result
 +                }
 +            )
 +        }
 +
 +    }
 +}
 +</​script>​
 +</​code>​
 +
  
 ---- ----
 [<>] [<>]