vue-resource使用

vue-resource是一個http請求插件,遵循promise,類似jquery中ajax操作。 vue-resource已不被官方推薦,官方推薦axios插件來操作http協議。

vue-resource中提供的方法
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
github源地址:https://github.com/pagekit/vue-resource/blob/master/README.md

安裝vue-resource

npm i vue-resource -S

vue-resource是發布后也需要使用的,安裝時要保存到dependencies中。
vue-resource引入
main.js中

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'Vue.config.productionTip = false
Vue.use(VueResource)/* eslint-disable no-new */
new Vue({el: '#app',router,template: '<App/>',components: { App }
})

vue-resource使用
熟悉promise語法的話,使用vue-resource挺簡單的,實際上任何不明確的地方看vue-resource文檔即可,列一下最常用的get、post、jsonp以及全局攔截器的示例,方便查看。

get、post、jsonp示例

export default {name: 'app',data () {return {addr: '/data.json'}},methods: {dataGet () {console.info('get')this.$http.get(this.addr, {params: {name: '1'},headers: {token: 'a'}}).then(res => {console.info(res.data)}, error => {console.info(error)})},dataPost () {console.info('post')this.$http.post(this.addr, {name: '1'}, {headers: {token: 'a'}}).then(res => {console.info(res.data)}, error => {console.info(error)})},dataJsonP () {console.info('jsonp')this.$http.jsonp(this.addr, {params: {name: '1'}}).then(res => {console.info(res.data)}, error => {console.info(error)})}}
}

全局攔截器

main.js中

Vue.http.interceptors.push(function (request, next) {console.info('resquest 開始,這里可以寫一些請求之前的預處理')next(function (response) {console.info('response 開始,所有http請求前都會調用此方法')return response})
})

vue-resource總結的很全面的幾篇文章:
https://www.cnblogs.com/axl234/p/5899137.html
http://blog.csdn.net/wcslb/article/details/55057010
https://segmentfault.com/a/1190000007087934

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247645.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247645.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247645.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HttpHttps

http協議與https Http 客戶端發送一個HTTP請求到服務器的請求消息包括以下格式&#xff1a; **請求行&#xff08;request line&#xff09;、請求頭部&#xff08;header&#xff09;、空行 和請求數據四個部分組成。** Get請求例子&#xff0c;使用Charles抓取的request&…

vue2使用axios post跳坑,封裝成模塊

終于將vue-resource替換成axios了&#xff0c;其中像application/x-www-form-urlencoded發送的頭信息以及返回的response結果這兩點都需要注意一下。 其實https://github.com/mzabriskie/axios也有說明的。因為我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…

axios使用

axios和vue-resource一樣&#xff0c;是一個vue中操作http的插件&#xff0c;遵循promise&#xff0c;vue官方也推薦使用axios。 安裝axios npm i axios -S axios也是在運行時需要的&#xff0c;所以要保存在dependencies中。 引入axios import axios from axios Vue.proto…

jQuery length 和 size()區別

jQuery length和size()區別總結如下&#xff1a; 1.length是屬性&#xff0c;size()是方法。 2.如果你只是想獲取元素的個數&#xff0c;兩者效果一樣既 $("img").length 和 $("img").size() 獲取的值是一樣的&#xff1b;但是如果是獲取字符串的長…

一些關于自己的未來的東西

2019.7.4 自己大一建立對編程的基礎認識&#xff0c;確實培養了一些興趣&#xff0c;入了個門&#xff0c;不過沒有接觸到本質。大二加入到了學校的網站開發團隊&#xff0c;對網站開發后端進行了學習&#xff0c;對后臺開發也有了基礎的學習吧&#xff0c;哈哈可能以后就是要走…

Javascript面向對象編程:構造函數的繼承

今天要介紹的是&#xff0c;對象之間的"繼承"的五種方法。 比如&#xff0c;現在有一個"動物"對象的構造函數。 function Animal(){ this.species "動物"; } 還有一個"貓"對象的構造函數。 function Cat(name,color){ this.name nam…

并發與多線程

并發 并發&#xff08;concurrency&#xff09;是指CPU在某個時間段內交替處理多任務的能力。每個CPU不可能只顧著執行某個進程&#xff0c;而讓其他進程一直等待被執行。所以&#xff0c;CPU把可執行時間均分成若干份&#xff0c;每個進程執行一份或多份時間后&#xff0c;記錄…

有沒有朋友可以幫我解釋一下貼水是什么意思?

通俗易懂的講&#xff1a;貼水便宜&#xff0c;升水貴 當前&#xff0c;螺紋鋼05合約就是貼水01合約 翻譯&#xff0c;螺紋鋼05合約就是比01合約便宜 升水同理 轉載于:https://www.cnblogs.com/luoluo-123/p/11142229.html

es6常用點記錄

letconst解構賦值字符串數組函數對象SymbolSetWeakSetMapWeakMapProxyreflectProxy與Reflex結合實例classpromiseiteratorGerneratorDecorators模塊學習資料 let /* let 聲明變量 *//* es6相對于es5的全局和局部作用域&#xff0c;多了一個塊作用域&#xff0c;塊作用域里聲明的…

jquery插件封裝指南

入門 編寫一個jQuery插件開始于給jQuery.fn加入??新的功能屬性&#xff0c;此處添加的對象屬性的名稱就是你插件的名稱&#xff1a; jQuery.fn.myPlugin function(){//你自己的插件代碼};用戶非常喜歡的$符號哪里去了&#xff1f; 它仍然存在&#xff0c;但是&#xff0c;為…

synchronize原理

synchronized的三種應用方式 一. 修飾實例方法&#xff0c;作用于當前實例加鎖&#xff0c;進入同步代碼前要獲得當前實例的鎖。 二. 修飾靜態方法&#xff0c;作用于當前類對象加鎖&#xff0c;進入同步代碼前要獲得當前類對象的鎖。 三. 修飾代碼塊&#xff0c;指定加鎖對象&…

不能修改“System Roots”鑰匙串

iOS mac添加證書 不能修改“System Roots”鑰匙串錯誤 如圖&#xff1a; 解決方式&#xff1a; 打開鑰匙串---登錄---&#xff0c;直接把證書拖過來 然后&#xff0c;查看--我的證書&#xff0c;里面&#xff0c;找到證書&#xff0c;即可

stylus在vue中的使用

stylus是一個css預處理器&#xff0c;比較流行的css預處理器有sass、less、stylus&#xff0c;它們都一樣&#xff0c;都是css的語法糖&#xff0c;可以使用變量&#xff0c;可以有簡單的邏輯&#xff0c;使css的開發效率更高&#xff0c;更易維護。stylus來自node社區&#xf…

未來產品的設計

Donald A. Norman繼《情感化設計》之后&#xff0c;又一設計精品力作&#xff1a; 未來產品的設計樣章試讀及本書預定&#xff1a;http://www.china-pub.com/195642市場價 &#xff1a;&#xffe5;39.00 會員價 &#xff1a; &#xffe5;29.25(75折) 【作  者】(美)Donald…

vue-cli webpack 配置分析

目錄結構 . ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.c…

css之字體圖標

SVG與字體圖標 SVG圖片是矢量圖片&#xff0c;不會隨著圖片的伸縮而影響質量&#xff0c;通常把只有一種顏色的圖標做成SVG&#xff0c;通過SVG生成字體圖標&#xff0c;放到項目中使用。 https://icomoon.io/是一個比較快捷的生成字體圖標的線上工具&#xff0c;進入主頁后&…

history.back(-1)和history.go(-1)的區別

history.back(-1):直接返回當前頁的上一頁&#xff0c;數據全部消息&#xff0c;是個新頁面 history.go(-1):也是返回當前頁的上一頁&#xff0c;不過表單里的數據全部還在 history.back(0) 刷新 history.back(1) 前進 history.back(-1) 后退

研發階段模擬接口數據

因為在vue-cli工程中需要創建很多.vue文件&#xff0c;我們希望創建vue文件和創建html、css、js文件一樣右鍵即可選擇創建&#xff0c;并且創建的文件中可預先寫好模板代碼。 webstorm-Preferences打開選項界面 選擇File and Code Templates&#xff0c;點擊綠色加號 填…

真實項目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了線程的局部變量&#xff0c;每個線程都可以通過 set() 和 get() 來對這個局部變量進行操作&#xff0c;但不會和其他線程的局部變量沖突&#xff0c;實現了線程間的據隔離。 簡單講&#xff1a;一個獲取用戶的請求線程 A&#xff0c;…

css之flex布局

flex布局是css3中的重要布局方式&#xff0c;稱為“彈性布局”&#xff0c;每次想到它主要是遇到元素垂直居中、元素寬高自適應的問題&#xff0c;這些問題在flex中都能過簡單設置就解決&#xff0c;它更像是原生APP中的布局操作&#xff0c;布局不必寫N多的盒模型代碼來實現&a…