vue項目及axios請求獲取數(shù)據(jù)方式
更新時間：2022年08月12日 08:39:05 作者：大橙子額
這篇文章主要介紹了vue項目及axios請求獲取數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
一般vue項目中 一個頁面是由多個組件組成的，各個組建的數(shù)據(jù)都是統(tǒng)一在主界面的組件中發(fā)送axios請求獲取，這樣極大地提高了性能。
一、首先導入用到的組件和axios
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
export default {
? name: 'Home',
? components: {
? ? HomeHeader,
? ? HomeSwiper,
? ? HomeIcons,
? ? HomeRecommend,
? ? HomeWeekend
? },二、在data中將要用到的數(shù)據(jù)給一個初始值，為空
? data () {
? ? return {
? ? ? swiperList: [],
? ? ? iconList: [],
? ? ? recommendList: [],
? ? ? weekendList: []
? ? }
? },三、在methods中寫方法，發(fā)送axios獲取數(shù)據(jù)
methods: {
? ? getHomeInfo () {
? ? ? axios.get('/api/index.json')
? ? ? ? .then(this.getHomeInfoSucc)
? ? },
? ? getHomeInfoSucc (res) {
? ? ? res=res.data
? ? ? if (res.ret && res.data) {
? ? ? ? const data = res.data
? ? ? ? this.swiperList = data.swiperList
? ? ? ? this.iconList = data.iconList
? ? ? ? this.recommendList = data.recommendList
? ? ? ? this.weekendList = data.weekendList
? ? ? }
? ? }
? },
? mounted () {
? ? this.getHomeInfo()
? }
}四、傳遞數(shù)據(jù)
<div> ? <home-header></home-header> ? <home-swiper :list="swiperList"></home-swiper> ? <home-icons :list="iconList"></home-icons> ? <home-recommend :list="recommendList"></home-recommend> ? <home-weekend :list="weekendList"></home-weekend> </div>
五、封裝 axios
通過簡單的配置就可以本地調(diào)試線上環(huán)境， 這里結(jié)合業(yè)務封裝了axios 。
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 創(chuàng)建axios實例
const service = axios.create({
? baseURL: process.env.BASE_API, // api的base_url
? timeout: 5000 // 請求超時時間
})
// request攔截器
service.interceptors.request.use(config => {
? // Do something before request is sent
? if (store.getters.token) {
? ? config.headers['X-Token'] = getToken() // 讓每個請求攜帶token--['X-Token']為自定義key 請根據(jù)實際情況自行修改
? }
? return config
}, error => {
? // Do something with request error
? console.log(error) // for debug
? Promise.reject(error)
})
// respone攔截器
service.interceptors.response.use(
? response => response,
? /**
? * 下面的注釋為通過response自定義code來標示請求狀態(tài)，當code返回如下情況為權限有問題，登出并返回到登錄頁
? * 如通過xmlhttprequest 狀態(tài)碼標識 邏輯可寫在下面error中
? */
? // ?const res = response.data;
? // ? ? if (res.code !== 20000) {
? // ? ? ? Message({
? // ? ? ? ? message: res.message,
? // ? ? ? ? type: 'error',
? // ? ? ? ? duration: 5 * 1000
? // ? ? ? });
? // ? ? ? // 50008:非法的token; 50012:其他客戶端登錄了; ?50014:Token 過期了;
? // ? ? ? if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
? // ? ? ? ? MessageBox.confirm('你已被登出，可以取消繼續(xù)留在該頁面，或者重新登錄', '確定登出', {
? // ? ? ? ? ? confirmButtonText: '重新登錄',
? // ? ? ? ? ? cancelButtonText: '取消',
? // ? ? ? ? ? type: 'warning'
? // ? ? ? ? }).then(() => {
? // ? ? ? ? ? store.dispatch('FedLogOut').then(() => {
? // ? ? ? ? ? ? location.reload();// 為了重新實例化vue-router對象 避免bug
? // ? ? ? ? ? });
? // ? ? ? ? })
? // ? ? ? }
? // ? ? ? return Promise.reject('error');
? // ? ? } else {
? // ? ? ? return response.data;
? // ? ? }
? error => {
? ? console.log('err' + error)// for debug
? ? Message({
? ? ? message: error.message,
? ? ? type: 'error',
? ? ? duration: 5 * 1000
? ? })
? ? return Promise.reject(error)
? })
export default service使用
import request from '@/utils/request'
export function getInfo(params) {
? return request({
? ? url: '/user/info',
? ? method: 'get',
? ? params
? });
}后臺項目每個請求都是要帶 token 來驗證權限的，封裝之后就不用每個請求都手動來塞 token，或者來做一些統(tǒng)一的異常處理，一勞永逸。
而且因為api 是根據(jù) env 環(huán)境變量動態(tài)切換的，如果以后線上出現(xiàn)了bug，我們只需配置一下 @/config/dev.env.js 再重啟一下服務，就能在本地模擬線上的環(huán)境了。
module.exports = {
? ? NODE_ENV: '"development"',
? ? BASE_API: '"https://api-dev"', //修改為'"https://api-prod"'就行了
? ? APP_ORIGIN: '"https://xxx.com"'?
}axios攔截器
通過request攔截器在每個請求頭里面塞入token，好讓后端對請求進行權限驗證。
創(chuàng)建一個respone攔截器，當服務端返回特殊的狀態(tài)碼，我們統(tǒng)一做處理，如沒權限或者token失效等操作。
import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 創(chuàng)建axios實例
const service = axios.create({
? baseURL: process.env.BASE_API, // api的base_url
? timeout: 5000 // 請求超時時間
})
// request攔截器
service.interceptors.request.use(config => {
? // Do something before request is sent
? if (store.getters.token) {
? ? config.headers['X-Token'] = getToken() // 讓每個請求攜帶token--['X-Token']為自定義key 請根據(jù)實際情況自行修改
? }
? return config
}, error => {
? // Do something with request error
? console.log(error) // for debug
? Promise.reject(error)
})
// respone攔截器
service.interceptors.response.use(
? response => response,
? /**
? * 下面的注釋為通過response自定義code來標示請求狀態(tài)，當code返回如下情況為權限有問題，登出并返回到登錄頁
? * 如通過xmlhttprequest 狀態(tài)碼標識 邏輯可寫在下面error中
? */
? // ?const res = response.data;
? // ? ? if (res.code !== 20000) {
? // ? ? ? Message({
? // ? ? ? ? message: res.message,
? // ? ? ? ? type: 'error',
? // ? ? ? ? duration: 5 * 1000
? // ? ? ? });
? // ? ? ? // 50008:非法的token; 50012:其他客戶端登錄了; ?50014:Token 過期了;
? // ? ? ? if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
? // ? ? ? ? MessageBox.confirm('你已被登出，可以取消繼續(xù)留在該頁面，或者重新登錄', '確定登出', {
? // ? ? ? ? ? confirmButtonText: '重新登錄',
? // ? ? ? ? ? cancelButtonText: '取消',
? // ? ? ? ? ? type: 'warning'
? // ? ? ? ? }).then(() => {
? // ? ? ? ? ? store.dispatch('FedLogOut').then(() => {
? // ? ? ? ? ? ? location.reload();// 為了重新實例化vue-router對象 避免bug
? // ? ? ? ? ? });
? // ? ? ? ? })
? // ? ? ? }
? // ? ? ? return Promise.reject('error');
? // ? ? } else {
? // ? ? ? return response.data;
? // ? ? }
? error => {
? ? console.log('err' + error)// for debug
? ? Message({
? ? ? message: error.message,
? ? ? type: 'error',
? ? ? duration: 5 * 1000
? ? })
? ? return Promise.reject(error)
? })
export default service以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案
vite+vue3項目發(fā)布后,瀏覽器上還是舊代碼,沒有及時更新到最新代碼,下面通過本文給大家分享vite+vue3不清除瀏覽器緩存直接下載最新代碼的解決方案,感興趣的朋友一起看看吧2024-06-06
這篇文章給大家介紹了Vue.js 表單控件操作的相關知識，本文通過實例演示了input和textarea元素中使用v-model的方法，本文給大家介紹的非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
pm是nodejs的包管理和分發(fā)工具,它可以讓javascript開發(fā)者能夠更加輕松的共享代碼和共用代碼片段,下面這篇文章主要給大家介紹了關于vue腳手架vue-cli卸載與安裝的相關資料,需要的朋友可以參考下2022-07-07
Vue路由跳轉(zhuǎn)與接收參數(shù)的實現(xiàn)方式
這篇文章主要介紹了Vue路由跳轉(zhuǎn)與接收參數(shù)的實現(xiàn)方式,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標組件庫(svg-sprite-loader)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue中使用 pako.js 解密 gzip加密字符串的方法
這篇文章主要介紹了vue項目中 使用 pako.js 解密 gzip加密字符串 的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復提交,本文給大家展示效果圖和完整代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
VUE3中引入.env下的環(huán)境變量,顯示process未定義問題
這篇文章主要介紹了VUE3中引入.env下的環(huán)境變量,顯示process未定義問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解
今天小編就為大家分享一篇對Vue- 動態(tài)元素屬性及v-bind和v-model的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了nginx部署多個vue項目的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09