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
Next revision
Previous revision
js:jeyson [2018-11-13 16:06]
ziggi
js:jeyson [2020-02-15 00:57] (current)
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>​
 +
  
 ---- ----
 [<>] [<>]