vue+axios がリクエストインターセプト機能を実装する方法

php中世界最好的语言
リリース: 2018-05-11 13:49:51
オリジナル
1667 人が閲覧しました

今回は、vue+axios がリクエストインターセプト機能を実装する方法について説明します。 vue+axios がリクエストインターセプト機能を実装する際の注意事項 について、実際のケースを見てみましょう。

axios の概要

axios は、ブラウザーおよび Nodejs 用の Promise ベースの HTTP クライアントです。それ自体には次の特徴があります:

ブラウザから XMLHttpRequest を作成する

node.js から http リクエストを発行する
Promise API をサポートする
リクエストとレスポンスをインターセプト
リクエストとレスポンスのデータを変換
リクエストをキャンセル
JSONデータを自動的に変換
クライアントはCSRF/XSRFの防止をサポートしています

次のコードはvue axiosリクエストのインターセプトを導入しています。具体的なコードは次のとおりです:

import axios from 'axios';//引入axios依赖 import { Message } from 'element-ui'; import Cookies from 'js-cookie'; //引入cookie操作依赖 import router from '@/router/index'//引入路由对象 axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 封装请求头拦截器 axios.interceptors.request.use( config => { var token = '' if(typeof Cookies.get('user') === 'undefined'){ //此时为空 }else { token = JSON.parse(Cookies.get('user')).token }//注意使用的时候需要引入cookie方法,推荐js-cookie config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/json' } if(token != ''){ config.headers.token = token; } return config; }, error => { return Promise.reject(err); } ); //http response 封装后台返回拦截器 axios.interceptors.response.use( response => { //当返回信息为未登录或者登录失效的时候重定向为登录页面 if(response.data.code == 'W_100004' || response.data.message == '用户未登录或登录超时,请登录!'){ router.push({ path:"/", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error => { return Promise.reject(error) } ) /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function fetch(url,params={}){ return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url,data = {}){ return new Promise((resolve,reject) => { axios.post(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /** * 封装导出Excal文件请求 * @param url * @param data * @returns {Promise} */ export function exportExcel(url,data = {}){ return new Promise((resolve,reject) => { axios({ method: 'post', url: url, // 请求地址 data: data, // 参数 responseType: 'blob' // 表明返回服务器返回的数据类型 }) .then(response => { resolve(response.data); let blob = new Blob([response.data], {type: "application/vnd.ms-excel"}); let fileName = "订单列表_"+Date.parse(new Date())+".xls" ; if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(blob, fileName); } else { var link = document.createElement('a'); link.href = window.URL.createObjectURL(blob); link.download = fileName; link.click(); window.URL.revokeObjectURL(link.href); } },err => { reject(err) }) }) } /** * 封装patch请求 * @param url * @param data * @returns {Promise} */ export function patch(url,data = {}){ return new Promise((resolve,reject) => { axios.patch(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /** * 封装put请求 * @param url * @param data * @returns {Promise} */ export function put(url,data = {}){ return new Promise((resolve,reject) => { axios.put(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) }
ログイン後にコピー
この記事の事例を読んでその方法をマスターしました。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueは検索リストコンテンツを実装します

vue+axios形式で画像をアップロードする手順の詳細な説明

以上がvue+axios がリクエストインターセプト機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。