搜索

+

95

-

vue如何使用vue-resource进行jsonp请求？

vue html5 javascript

请问vue如何使用vue-resource进行jsonp请求？

网友回复

+

15

-

如果是vue-resource的话，这样写 this.$http.jsonp，完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        请输入关键字：<input type="text" v-model="keyword" @keyup="sendJsonP(keyword)">
        <ul>
            <li v-for="r in result">{{r}}</li>
        </ul>
    </div>
    <script>
        window.onload = function () {
            new Vue({
                el: '#app',
                data: {
                    keyword: '',
                    result: ''
                },
                methods: {
                    sendJsonP(keyword) {
                        let url = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web';
                        this.$http.jsonp(url, {
                            params: {
                                wd: keyword
                            },
                            jsonp: 'cb'//jsonp默认是callback,百度缩写成了cb，所以需要指定下                     }
                        }).then(res => {
                            if (res.data.g) {
                                this.result = res.data.g.map(x => x['q']);
                            } else {
                                this.result = [];
                            }
                        });
                    }
                }
            });
        }
    </script>
</body>
</html>

如果是axios,我们自己写了一个axios.jsonp函数

<!DOCTYPE h...

点击查看剩余70%

我知道答案，我要回答

我有问题

最新提问