vue-resource:jsonp请求百度搜索的接口示例


Posted in Javascript onNovember 09, 2019

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请求百度搜索的接口示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
用JS剩余字数计算的代码
Jul 03 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
浅谈js中的this问题
Aug 31 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
You might like
PHP 开源AJAX框架14种
2009/08/24 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
php常用文件操作函数汇总
2014/11/22 PHP
php提高网站效率的技巧
2015/09/29 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JavaScript创建对象的写法
2013/08/29 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python分治法求二维数组局部峰值方法
2018/04/03 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
简单了解python协程的相关知识
2019/08/31 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
小学教师岗位职责
2013/11/25 职场文书
销售业务员岗位职责
2014/01/29 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
目标责任书范文
2014/04/14 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
大学生实训报告总结
2014/11/05 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
宇宙与人观后感
2015/06/05 职场文书