vue-resource:jsonp請求百度搜索的接口示例
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之后, 相當(dāng)于在vue實(shí)例(this)身上新增了一些方法或?qū)ο?如:$http) this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', //jsonp參數(shù)一: 跨域請求接口; { params:{ //jsonp交互走的是get形式(不是post), 傳遞參數(shù)用params wd:'a' }, jsonp:'cb' //接口的callback名字, vue默認(rèn)名字為"callback" }, //jsonp參數(shù)二: 傳到的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請求百度搜索的接口示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3如何通過provide和inject實(shí)現(xiàn)多層級組件通信
這篇文章主要介紹了vue3如何通過provide和inject實(shí)現(xiàn)多層級組件通信,本文通過實(shí)例代碼給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05解決vue-cli單頁面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問題
今天小編就為大家分享一篇解決vue-cli單頁面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08vue第三方庫中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問題的解決方案
這篇文章主要介紹了vue第三方庫中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問題,本文給大家分享解決方案,通過結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12