vue-resourceライブラリ送信要求を使用してデータを取得する

2440 ワード

データ取得vue-resource

vue-resource

axios

単にvue-resourceはjQueryの$のようなものです.ajaxは、バックエンドとデータをインタラクティブにするために使用されます.createdまたはreadyで実行してデータを取得または更新できます...
vue-resourceの特徴
vue-resourceプラグインには、次の機能があります.

体積の小さいvue-resourceは非常に小さく、圧縮後は約12 KBしかなく、サービス側がgzip圧縮を有効にした後は4.5 KBの大きさしかなく、jQueryの体積よりはるかに小さい.

は主流のブラウザとVueをサポートする.js同様、vue-resourceはIE 9以下のブラウザをサポートしていないほか、主流のブラウザもサポートしています.

はPromise APIとURI Templates PromiseをサポートするES 6の特性であり、Promiseの中国語の意味は「預言者」であり、Promiseオブジェクトは非同期計算に使用される.URI TemplatesはURIテンプレートを表し、ASPに似ているものがある.NET MVCのルーティングテンプレート.

がブロッキングをサポートするブロッキングはグローバルであり、ブロッキングは、要求の送信前および送信後にいくつかの処理を行うことができる.ブロッキングは、リクエスト送信前にheadersでaccess_を設定するなど、いくつかのシーンで非常に役立ちます.token、またはリクエストに失敗した場合、共通の処理方法を提供します.

vue-resource使用
1.vue-resourceの導入

基本構文

vue-resourceが導入されると、グローバルなVueオブジェクトに基づいてhttpを使用してもよいし、あるVueインスタンスに基づいてhttpを使用してもよい.

//グローバルVueオブジェクトに基づいてhttp
Vueを使用する.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
//Vueインスタンス内で$http
this.$を使用http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

リクエストを送信した後、thenメソッドを使用して応答結果を処理し、thenメソッドには2つのパラメータがあり、1つ目のパラメータは応答成功時のコールバック関数であり、2つ目のパラメータは応答失敗時のコールバック関数である.

GET

説明:JSONPを送信方法はget要求と同じ

const url = 'http://vue.studyit.io/api/getnewslist'
this.$http.get(url)
  .then(data => {
    console.log(data)
    console.log(data.body)
  })

POST

// const url = 'http://182.254.146.100:8899/api/postcomment/17'
const url = 'http://vue.studyit.io/api/postcomment/17'
this.$http.post(url, {
  content: '完美！'
}, {
  emulateJSON: true
})
  .then(data => {
    console.log(data.body);
  })

JSONP

const url = 'http://v.showji.com/Locating/showji.com2016234999234.aspx?m=13333333333&output=json&&timestamp=' + (new Date() - 0)
this.$http.jsonp(url)
  .then(data => {
    console.log(data.body);
  })