您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue如何封裝axios請求”,在日常操作中,相信很多人在vue如何封裝axios請求問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue如何封裝axios請求”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
axios
Axios 是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中, 也是vue官方推薦使用的http庫;封裝axios,一方面為了以后維護方便,另一方面也可以對請求進行自定義處理
安裝
npm i axios
封裝
我把axios請求封裝在http.js中,重新把get請求,post請求封裝了一次
首先,引入axios
import axios from 'axios'
設(shè)置接口請求前綴
一般我們開發(fā)都會有開發(fā)、測試、生產(chǎn)環(huán)境,前綴需要加以區(qū)分,我們利用node環(huán)境變量來作判斷,
if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'http://dev.xxx.com' } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com' }
在localhost調(diào)試時,直接用開發(fā)地址一般都會有跨域的問題,所以我們還需要配置代理
本項目是vue cli3搭建的,代理配置是在vue.config.js文件中:
module.exports = { devServer: { proxy: { '/proxyApi': { target: 'http://dev.xxx.com', changeOrigin: true, pathRewrite: { '/proxyApi': '' } } } } }
這樣就成功把/proxyApi 指向了 'http://dev.xxx.com',重啟服務(wù)
修改一下http.js中的配置
if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi' } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com' }
攔截器
接著設(shè)置超時時間和請求頭信息
axios.defaults.timeout = 10000 // 請求頭信息是為post請求設(shè)置 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
axios很好用,其中之一就是它的攔截器十分強大,我們就可以為請求和響應(yīng)設(shè)置攔截器,比如請求攔截器可以在每個請求里加上token,做了統(tǒng)一處理后維護起來也方便,響應(yīng)攔截器可以在接收到響應(yīng)后先做一層操作,如根據(jù)狀態(tài)碼判斷登錄狀態(tài)、授權(quán)。
// 請求攔截器 axios.interceptors.request.use( config => { // 每次發(fā)送請求之前判斷是否存在token // 如果存在,則統(tǒng)一在http請求的header都加上token,這樣后臺根據(jù)token判斷你的登錄情況,此處token一般是用戶完成登錄后儲存到localstorage里的 token && (config.headers.Authorization = token) return config }, error => { return Promise.error(error) }) // 響應(yīng)攔截器 axios.interceptors.response.use(response => { // 如果返回的狀態(tài)碼為200,說明接口請求成功,可以正常拿到數(shù)據(jù) // 否則的話拋出錯誤 if (response.status === 200) { if (response.data.code === 511) { // 未授權(quán)調(diào)取授權(quán)接口 } else if (response.data.code === 510) { // 未登錄跳轉(zhuǎn)登錄頁 } else { return Promise.resolve(response) } } else { return Promise.reject(response) } }, error => { // 我們可以在這里對異常狀態(tài)作統(tǒng)一處理 if (error.response.status) { // 處理請求失敗的情況 // 對不同返回碼對相應(yīng)處理 return Promise.reject(error.response) } })
get post的封裝
httpGet: 一個參數(shù)是請求的url,一個就攜帶的請求參數(shù),返回promise對象
// get 請求 export function httpGet({ url, params = {} }) { return new Promise((resolve, reject) => { axios.get(url, { params }).then((res) => { resolve(res.data) }).catch(err => { reject(err) }) }) }
httpPost: 原理和get差不多,需要注意,這里多了個data參數(shù),post請求提交前需要對它進行序列號操作,這里是通過transformRequest做處理;另外兩個參數(shù)url,params和get請求的一樣;
// post請求 export function httpPost({ url, data = {}, params = {} }) { return new Promise((resolve, reject) => { axios({ url, method: 'post', transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], // 發(fā)送的數(shù)據(jù) data, // url參數(shù) params }).then(res => { resolve(res.data) }) }) }
如何使用
我把所有的接口調(diào)用都在api.js文件中
先引入封裝好的方法,再在要調(diào)用的接口重新封裝成一個方法暴露出去
import { httpGet, httpPost } from './http' export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })
在頁面中可以這樣調(diào)用:
// .vue import { getorglist } from '@/assets/js/api' getorglist({ id: 200 }).then(res => { console.log(res) })
這樣可以把api統(tǒng)一管理起來,以后維護修改只需要在api.js文件操作即可。
完整代碼
最后貼上完整代碼
// http.js import axios from 'axios' // 環(huán)境的切換 if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = '/proxyApi' } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://prod.xxx.com' } // 請求攔截器 axios.interceptors.request.use( config => { token && (config.headers.Authorization = token) return config }, error => { return Promise.error(error) }) axios.defaults.timeout = 10000 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 響應(yīng)攔截器 axios.interceptors.response.use(response => { if (response.status === 200) { if (response.data.code === 511) { // 未授權(quán)調(diào)取授權(quán)接口 } else if (response.data.code === 510) { // 未登錄跳轉(zhuǎn)登錄頁 } else { return Promise.resolve(response) } } else { return Promise.reject(response) } }, error => { // 我們可以在這里對異常狀態(tài)作統(tǒng)一處理 if (error.response.status) { // 處理請求失敗的情況 // 對不同返回碼對相應(yīng)處理 return Promise.reject(error.response) } }) // get 請求 export function httpGet({ url, params = {} }) { return new Promise((resolve, reject) => { axios.get(url, { params }).then((res) => { resolve(res.data) }).catch(err => { reject(err) }) }) } // post請求 export function httpPost({ url, data = {}, params = {} }) { return new Promise((resolve, reject) => { axios({ url, method: 'post', transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], // 發(fā)送的數(shù)據(jù) data, // url參數(shù) params }).then(res => { resolve(res.data) }) }) }
// api.js import { httpGet, httpPost } from './http' export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params }) export const save = (data) => { return httpPost({ url: 'apps/wechat/api/save_member', data }) }
// .vue <script> import { getorglist } from '@/assets/js/api' export default { name: 'upload-card', data() {}, mounted() { getorglist({ id: 200 }).then(res => { // console.log(res) }) }, } </script>
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
到此,關(guān)于“vue如何封裝axios請求”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。