vue-resource:jsonp请求百度搜索的接口示例
2020-04-15 12:03
666 查看
1. yarn add vue-resource
2. main.js引入vue-resource
import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' import router from './router' import VueResource from 'vue-resource' Vue.config.productionTip = false Vue.use(MintUI) Vue.use(VueResource) new Vue({ router, render: h => h(App) }).$mount('#app')
3. About.vue
<template> <mt-button type="primary" size="small" @click="get()">default</mt-button> </template> <script> export default { name: 'about', data(){ return{ } }, methods:{ get(){ //引入vue-resource之后, 相当于在vue实例(this)身上新增了一些方法或对象(如:$http) this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', //jsonp参数一: 跨域请求接口; { params:{ //jsonp交互走的是get形式(不是post), 传递参数用params wd:'a' }, jsonp:'cb' //接口的callback名字, vue默认名字为"callback" }, //jsonp参数二: 传到的params和callback类型 ).then(function(res){ //固定形式: jsonp('',{params{},jsonp:'cb'}).then(function(){'成功'},function(){'失败'}); alert(res.data.s); },function(res){ alert(res.status); }); } } } </script>
以上这篇vue-resource:jsonp请求百度搜索的接口示例就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- vue-resource 1.2 jsonp用法(实现百度搜索功能)
- vue2.0,jsonp的一个小案例 请求百度搜索的接口
- vue-resource 跨域 post请求 示例
- JSONP跨域请求+简答实现百度搜索
- vue 请求接口示例 --小丑
- Vue中vue-resource实现get,post,jsonp请求
- 用vue的jsonp写了个百度搜索的demo
- vue proxyTable 接口跨域请求调试的示例
- javascript的同源策略以及jsonp请求百度天气接口
- vue-resource实现get,post,jsonp请求
- vue项目中axios请求网络接口封装的示例代码
- vue2.0,jsonp仿百度搜索页面,请求百度数据
- vue-resource 实现 get, post, jsonp请求 --Y.
- vue中使用vue-resource、axios、fetch-jsonp请求数据
- vue-resource jsonp接口传参-json传参
- Vue-resource实现get,post,jsonp请求
- jsonp结合百度接口-实现搜索功能
- vue-resource 中 get / post / jsonp 三种请求方式的异同
- vue-resource实现get、post、jsonp请求【Vue.js】
- 实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)