第一步還是先下載axios
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:空間域名、虛擬空間、營銷軟件、網站建設、石泉網站維護、網站推廣。
npm install axios --save
第二步/src/utils/目錄下建立一個htttp.js
import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 攔截器 axios.interceptors.request.use( config => { // const token = getCookie('名稱'); config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } // if(token){ // config.params = {'token':token} // } return config; }, error => { return Promise.reject(err); } ); //http response 攔截器 axios.interceptors.response.use( response => { if(response.data.errCode ==2){ router.push({ path:"/login", 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) }) }) }
第三步
在main.js中引入
import {post,get} from './utils/http' //定義全局變量 Vue.prototype.$post=post; Vue.prototype.$get=get;
最后在組件里直接使用
mounted(){ this.$post('/api/v2/movie/top250') .then((response) => { console.log(response) }) },
其余的方法一樣
總結
以上所述是小編給大家介紹的vue中axios的封裝問題(簡易版攔截,get,post),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持!
網頁題目:vue中axios的封裝問題(簡易版攔截,get,post)
分享URL:http://vcdvsql.cn/article28/gdgjcp.html
成都網站建設公司_創新互聯,為您提供用戶體驗、響應式網站、網站內鏈、微信小程序、全網營銷推廣、靜態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯