vue專案及axios請求獲取資料

2021-08-28 04:32:29 字數 3037 閱讀 6163

一般vue專案中 乙個頁面是由多個元件組成的，各個組建的資料都是統一在主介面的元件中傳送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 ,
data () 


},
methods: ,


gethomeinfosucc (res) }},


mounted () 


}
通過簡單的配置就可以本地除錯線上環境， 這裡結合業務封裝了axios 。

import axios from 'axios'


import  from 'element-ui'


import store from '@/store'


import  from '@/utils/auth'


// 建立axios例項


const service = axios.create()


// request***


service.interceptors.request.use(config => 


return config


}, error => )


// respone***


service.interceptors.response.use(


response => response,


/*** 下面的注釋為通過response自定義code來標示請求狀態，當code返回如下情況為許可權有問題，登出並返回到登入頁


* 如通過xmlhttprequest 狀態碼標識 邏輯可寫在下面error中


*///  const res = response.data;


//     if (res.code !== 20000) );


//       // 50008:非法的token; 50012:其他客戶端登入了;  50014:token 過期了;


//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) ).then(() => );


//         })


//       }


//       return promise.reject('error');


//     } else 


error => )


return promise.reject(error)


})export default service
使用

import request from '@/utils/request'


export function getinfo(params) );


}
後台專案每個請求都是要帶 token 來驗證許可權的，封裝之後就不用每個請求都手動來塞 token，或者來做一些統一的異常處理，一勞永逸。

而且因為api 是根據 env 環境變數動態切換的，如果以後線上出現了bug，我們只需配置一下 @/config/dev.env.js 再重啟一下服務，就能在本地模擬線上的環境了。

module.exports =
通過request***在每個請求頭裡面塞入token，好讓後端對請求進行許可權驗證。

建立乙個respone***，當服務端返回特殊的狀態碼，我們統一做處理，如沒許可權或者token失效等操作。

import axios from 'axios'


import  from 'element-ui'


import store from '@/store'


import  from '@/utils/auth'


// 建立axios例項


const service = axios.create()


// request***


service.interceptors.request.use(config => 


return config


}, error => )


// respone***


service.interceptors.response.use(


response => response,


/*** 下面的注釋為通過response自定義code來標示請求狀態，當code返回如下情況為許可權有問題，登出並返回到登入頁


* 如通過xmlhttprequest 狀態碼標識 邏輯可寫在下面error中


*///  const res = response.data;


//     if (res.code !== 20000) );


//       // 50008:非法的token; 50012:其他客戶端登入了;  50014:token 過期了;


//       if (res.code === 50008 || res.code === 50012 || res.code === 50014) ).then(() => );


//         })


//       }


//       return promise.reject('error');


//     } else 


error => )


return promise.reject(error)


})export default service

vue專案axios使用及axios的配置介紹

axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中 以下主要是vue專案使用方式的介紹 npm install axios2 在main.js引入 import as axios from axios vue.prototype.axios axios3 ...

vue專案使用axios請求後端資料

在專案中使用到的向後端請求和提交資料的方式，axios請求 在使用axios時，需要先安裝axios npm install axios安裝完成後在main.js中引入 import axios from axios 為了使用方便在定義為全域性方法 vue.prototype.http axios完...

vue專案中封裝axios請求

1.前言 之前是我負責這個專案的搭建，及打包上線，整個專案都是我乙個人來做，所以介面寫的遍地都是，造成了瀏覽起來很難受，不便於維護 所以就打算封裝一下axios 建立乙個apis 的js檔案來集中管理介面，走著！首先考慮的是通過promise來封裝axios，使 看起來更清晰明了 2.1 專案中引入...