可能是vue中使用axios最詳細教程
更新時間:2022年08月15日 10:05:29 作者:醉夢者
Axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端,本質上也是對原生XHR的封裝,只不過它是Promise的實現(xiàn)版本,符合最新的ES規(guī)范,下面這篇文章主要給大家介紹了關于vue中使用axios最詳細教程的相關資料,需要的朋友可以參考下
前提條件:vue-cli 項目
安裝:
npm axios from 'axios'
較科學的封裝好的axios:(new-axios.js)
import?axios?from?'axios' import?{?Notify?}?from?'vant'; //?import?Vue?from?'vue' //?import?store?from?'@/store'? // 我此項目沒有用到vuex,所以vuex代碼的都注釋了,需要的自己打開使用 //?import?{ACCESS_TOKEN}?from?'@/store/mutation-types' //?創(chuàng)建?axios?實例 const?requests?=?axios.create({ ??baseURL:?process.env.VUE_APP_API,?// 基礎url,如果是多環(huán)境配置這樣寫,也可以像下面一行的寫死。 // baseURL: 'http://168.192.0.123', ??timeout:?6000?//?請求超時時間 }) ? // 錯誤處理函數(shù) const?err?=?(error)?=>?{ ??if?(error.response)?{ ????const?data?=?error.response.data ????//?const?token?=?Vue.ls.get(ACCESS_TOKEN) ????if?(error.response.status?===?403)?{ ????????Notify({?type:?'danger',?message:?data.message||data.msg?}); ????} ????if?(error.response.status?===?401)?{ ????????Notify({?type:?'danger',?message:?'你沒有權限。'?}); ??????//?if?(token)?{ ??????//???store.dispatch('Logout').then(()?=>?{ ??????//?????setTimeout(()?=>?{ ??????//???????window.location.reload() ??????//?????},?1500) ??????//???}) ??????//?} ????} ??} ??return?Promise.reject(error) } //?request?interceptor(請求攔截器) requests.interceptors.request.use(config?=>?{ //???const?token?=?Vue.ls.get(ACCESS_TOKEN) ??const?token?=?localStorage.getItem('token') ??if?(token)?{ ????config.headers['token']?=?token?//?讓每個請求攜帶自定義?token?請根據(jù)實際情況自行修改 ??} ??return?config },?err) //?response?interceptor(接收攔截器) requests.interceptors.response.use((response)?=>?{ ??const?res?=?response.data ??if?(res.code?!==?0&&res.code!==200)?{? ????Notify({?type:?'danger',?message:?res.message||res.msg?}); ????//?401:未登錄; ????if?(res.code?===?401||res.code?===?403||res.code===999)?{ ??????Notify({?type:?'danger',?message:?'請登錄'}); ????} ????return?Promise.reject('error') ??}?else?{ ????return?res ??} },?err) export?default?{ ??requests }
main.js 引入,添加到vue原型
import requests from '@s/basejs/new-axios.js' // 記得改為你的路徑 Vue.prototype.rq = requests // 此處命名為rq,你可以改
使用
this.rq.get('/api/product/get?productChannelId='+this.productChannelId).then(res=>{ console.log(res) }) // 傳對象參數(shù) // get請求記得加params this.rq.get('/api/product/get,{params:{name:'abc'}}).then(res=>{ console.log(res) }) this.rq.post('/api/product/get,{name:'abc'}).then(res=>{ console.log(res) })
以下步驟一般不需要
開發(fā)環(huán)境如果要跨域,解決跨域問題(設置代理):vue-cli 3.0的在 package.json 同級目錄新建一個 vue.config.js 文件,加入下面代碼,其他版本找到配置文件的devServer加入代碼
:
module.exports = { //axios域代理,解決axios跨域問題 baseUrl: '/', devServer: { proxy: { '': { target: 'http://192.168.0.108:8090', changeOrigin: true, ws: true, pathRewrite: { } } } } }
修改完后記得重啟項目應用配置
總結
到此這篇關于vue中使用axios最詳細教程的文章就介紹到這了,更多相關vue使用axios教程內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法
下面小編就為大家分享一篇vue2.0 + element UI 中 el-table 數(shù)據(jù)導出Excel的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Vue3警告:Failed to resolve component:XXX的詳細解決辦法
最近在一個vue3項目中遇到了報錯,整理了些解決辦法,這篇文章主要給大家介紹了關于Vue3警告:Failed to resolve component:XXX的詳細解決辦法,文中介紹的非常詳細,需要的朋友可以參考下2023-05-05