Vue追加要求ブロック及びvue-resourceブロッキングを使用します。
一、現象
エラーの一括処理と配置要求情報
解決する
1、axiosをインストールする , コマンド:
4、アプリケーション、登録されたポストなど。
vueプロジェクトでvue-resourceを使用する過程で、一時的に需要が増加しました。どのページでもhttp要求が必要です。tokenの期限が切れたという判断を追加しました。tokenが期限切れになったら、ログインページにジャンプしてください。各ページのhttp依頼操作に判断を加えると非常に大きな修正作業になります。では、vue-resourceは、キャプチャに対する応答を求める任意の共通のフィードバック関数が存在しますか?答えはある
vue-resourceのinterceptorsブロックの役割はこの需要を解決する優れた方法です。httpの要求に応答した後、ブロックが設置されている場合は、優先的にブロック関数を実行し、応答体を取得してから、レスポンスを返すかどうかを決定します。
thenは受信を行う。このブロックに応答状態コードの判定を追加して、ログインページにジャンプするかそれとも現在のページに残してデータを取得するかを決めます。
下のコードをmain.jsに追加します。
以上は小编が皆さんに绍介したVue追加要求ブロックとvue-resourceブロックを使っています。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
エラーの一括処理と配置要求情報
解決する
1、axiosをインストールする , コマンド:
npm install axios --save-dev
2、ルートディレクトリのconfigディレクトリの下でファイルを新規作成するaxios.js ,内容は以下の通りです
import axios from 'axios'
// host, API host :http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'
//
axios.interceptors.request.use(function (config) {
//
return config
}, function (error) {
//
return Promise.reject(error)
});
//
axios.interceptors.response.use(function (response) {
//
return response
}, function (error) {
//
return Promise.reject(error)
});
3、main.jsで引用し、別名($ajax)を配置して呼び出しを行います。
import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios
図のように:4、アプリケーション、登録されたポストなど。
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
ps:次はvue-resourceスクリーンショットを見て使用します。vueプロジェクトでvue-resourceを使用する過程で、一時的に需要が増加しました。どのページでもhttp要求が必要です。tokenの期限が切れたという判断を追加しました。tokenが期限切れになったら、ログインページにジャンプしてください。各ページのhttp依頼操作に判断を加えると非常に大きな修正作業になります。では、vue-resourceは、キャプチャに対する応答を求める任意の共通のフィードバック関数が存在しますか?答えはある
vue-resourceのinterceptorsブロックの役割はこの需要を解決する優れた方法です。httpの要求に応答した後、ブロックが設置されている場合は、優先的にブロック関数を実行し、応答体を取得してから、レスポンスを返すかどうかを決定します。
thenは受信を行う。このブロックに応答状態コードの判定を追加して、ログインページにジャンプするかそれとも現在のページに残してデータを取得するかを決めます。
下のコードをmain.jsに追加します。
Vue.http.interceptors.push((request, next) => {
console.log(this)// this Vue
// modify request
request.method = 'POST';//
// continue to next interceptor
next((response) => {// then response 。 token , , http
response.body = '...';
return response;
});
});
この方法を知る前に、拙者は愚かな方法を考えましたが、ある程度の修正作業量を減らすことができます。方法はthis.$$http.get
方法の代わりに、Vueバインディングのために、各ページのhttp要求に$httpの前に追加すればいいです。
// ajax.js
function plugin(Vue){
Object.defineProperties(Vue.prototype,{
$$http:{
get(){
return option(Vue);
}
}
})
}
function option(Vue){
let v = new Vue();
return {
get(a,b){
let promise = new Promise(function(reslove,reject){
v.$http.get(a,b).then((res)=>{
reslove(res)
},(err)=>{
// token 。
})
})
return promise;
}
}
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)
締め括りをつける以上は小编が皆さんに绍介したVue追加要求ブロックとvue-resourceブロックを使っています。皆さんに助けてほしいです。もし何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。