axios的簡單封裝以及使用實例代碼
前言
最近在構(gòu)建項目時,想到了請求的封裝,之后就琢磨如何封裝才好。雖然對各位大佬來說可能是個小事情,但對我來說也算是一個小小的挑戰(zhàn)。在我設(shè)想中請求的一些基本配置與具體接口應(yīng)該放于兩個文件,因此我新建了兩個文件 axios.js與api.js
axios.js
axios.js主要是針對axios的一些基本配置: baseURL 請求攔截器 響應(yīng)攔截器 等等
import axios from 'axios'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from '../router';
首先在當(dāng)前js中引入axios,引入element是為了在當(dāng)前js內(nèi)可以使用其組件,目的是為了在響應(yīng)攔截器中對各種返回值進(jìn)行直接提示。引入router的為了在響應(yīng)攔截器中根據(jù)具體返回值來進(jìn)行頁面跳轉(zhuǎn),比如沒有權(quán)限則跳轉(zhuǎn)到登錄頁面
if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'api'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'https://xxxxxxxxxx/index/'; }
對于baseURL的處理,我區(qū)分了開發(fā)環(huán)境與生產(chǎn)環(huán)境
//請求攔截器 區(qū)分了一下正常請求時與發(fā)送formdata時的請求頭 axios.interceptors.request.use((config) => { config.headers['Content-Type'] = 'application/json'; if (config.method === 'post') { //FormData時的請求頭 if (Object.prototype.toString.call(config.data) === '[object FormData]') { // 請求攔截器處理 config.headers['Content-Type'] = 'multipart/form-data'; } else if (Object.prototype.toString.call(config.data) === '[object String]') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; } } else { config.headers['Content-Type'] = 'application/json'; } return config; }); //響應(yīng)攔截器 axios.interceptors.response.use( (config) => { let value = config.data; if (config.status && config.status === 200) { if (typeof value === 'string') { if (value === 'timeout') { ElementUI.MessageBox.confirm('太長時間沒有操作或操作沒有權(quán)限,請進(jìn)入登錄頁面重新登錄?', '提示', { confirmButtonText: '確定', type: 'warning' }).then(() => { router.push({ name: 'login' }); }); }else { ElementUI.Message.info(value); } } } return config; }, (err) => { let value = err.response.statusText; switch (err.response.status) { case 400: ElementUI.Message.error('語法格式有誤,服務(wù)器無法理解此請求') break; case 401: case 403: case 404: case 405: ElementUI.Message.warning(value); break; default: ElementUI.Message.error('操作過程出錯,此次操作無效!' + value); break; } return err.response } );
對于響應(yīng)攔截器,我這邊是根據(jù)自己后端返回的值來處理,因為沒怎么弄過后端所以只是對返回簡單處理了一下
下面是對get與post的一個封裝
export async function axiosGet(url, params = {}) { let res = await axios.get(url, { params: params }); if(res.status === 200){ return res.data }else { throw res.statusText } } export async function axiosPost(url, params = {}) { let res = await axios.post(url, params); if(res.status === 200){ return res.data }else { throw res.statusText } }
使用async與await 直接取到返回值進(jìn)行判斷,如果返回成功則輸出返回值 如果不成功則拋出錯誤
最后將封裝的方法導(dǎo)出
api.js
整個api.js是項目內(nèi)所有接口存放的地方
import { axiosGet,axiosPost } from './axios'
引入axios.js,獲取到封裝的axiosGet與axiosPost
export default { getLogin:(params = {}) => { return axiosPost('/login', params) }, getUser:(params = {}) => { return axiosGet('http://localhost:3000/user', params) } }
這里我使用簡單的兩個接口來做示例,在api.js中的處理就已經(jīng)完成了
使用配置好的接口
到這里我們的axios已經(jīng)封裝完畢,接下來就是使用的演示了
import DbauditServer from '@/server/api' //在要調(diào)用接口的文件中引入api.js let formData = new FormData formData.append('password', this.formLabelAlign.password) let res1 = await DbauditServer.getLogin(formData) //直接調(diào)用就可以正常使用了 let res2 = await DbauditServer.getUser()
當(dāng)然還可以細(xì)致一些,因為之前封裝get與post的時候遇到錯誤返回值是直接拋出,因此,接口的調(diào)用也可以使用try catch來包裹,對error進(jìn)行特定的處理即可。
總結(jié)
到此這篇關(guān)于axios的簡單封裝以及使用的文章就介紹到這了,更多相關(guān)axios簡單封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
原生js實現(xiàn)改變隨意改變div屬性style的名稱和值的結(jié)果
在本文將為大家介紹下如何用原生js和jQuery實現(xiàn)隨意改變div屬性,和重置,具體實現(xiàn)如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-09js is_valid_filename驗證文件名的函數(shù)
有時候我們需要對文件名進(jìn)行控制,包括一些特殊命名的文件與特殊符號的文件名進(jìn)程替換,那么就可以使用下面的函數(shù)2017-07-07下載網(wǎng)站打開頁面后間隔多少時間才顯示下載鏈接地址的代碼
有時候可能為了一些更好的廣告效果等原因,需要讓用戶等待一段時間以后,再顯示真實下載地址代碼,有利于緩解服務(wù)器壓力。2010-04-04微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍(lán)牙設(shè)備搜索及連接功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-06-06關(guān)于取不到由location.href提交而來的上級頁面地址的解決辦法
驗證上級頁面來源取不到由location.href提交而來的頁面地址,搜索了一大堆沒有合適的解決辦法,突然想到通過模擬JS點擊鏈接的方法2009-07-07js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10Javascript自定義函數(shù)判斷網(wǎng)站訪問類型是PC還是移動終端
如果,能夠判斷出訪問Web網(wǎng)頁的類型(PC還是移動終端)。就可以解決許多絢麗多彩的 Flash效果出不來的問題2014-01-01