Vue項目中如何封裝axios(統一管理http請求)
1、需求說明
在使用Vue.js框架開發前端項目時,會經常發送ajax請求服務端接口,在開發過程中,需要對axios進一步封裝,方便在項目中的使用。
2、Vue項目結構
在本地創建Vue項目,目錄結構如下:
– public 靜態資源文件
– src
|- assets 靜態資源目錄
|- components 公共組件目錄
|- http axios封裝目錄
|- router 路由管理目錄
|- store 狀態管理目錄
|- views 視圖組件目錄
|- App.vue 根組件
|- main.js 入口文件
– package.json npm配置文件
在Vue項目中創建 http目錄 作為axios的管理目錄,在 http目錄 下兩個文件,分別是
- /http/index.js 封裝axios方法的文件
- /http/api.js 統一管理接口的文件
3、代碼示例
/http/api.js文件代碼如下:
export default { 'users_add': '/users/add', 'users_find': '/users/find', 'users_update': '/users/update', 'users_delete': '/users/delete' }
/http/index.js文件代碼如下:
import axios from 'axios' import api from './api' //創建axios實例對象 let instance = axios.create({ baseURL: 'http://localhost:3000', //服務器地址 timeout: 5000 //默認超時時長 }) //請求攔截器 instance.interceptors.request.use(config=>{ //此處編寫請求攔截的代碼,一般用於彈出加載窗口 console.log('正在請求……') return config },err=>{ console.error('請求失敗',err) }) //響應攔截器 instance.interceptors.response.use(res=>{ //此處對響應數據做處理 console.log('請求成功!') return res //該返回對象會傳到請求方法的響應對象中 },err=>{ // 響應錯誤處理 console.log('響應失敗!',err) // return Promise.reject(err); }) //封裝axios請求方法,參數為配置對象 //option = {method,url,params} method為請求方法,url為請求接口,params為請求參數 async function http(option = {}) { let result = null if(option.method === 'get' || option.method === 'delete'){ //處理get、delete請求 await instance[option.method]( api[option.url], {params: option.params} ).then(res=>{ result = res.data }).catch(err=>{ result = err }) }else if(option.method === 'post' || option.method === 'put'){ //處理post、put請求 await instance[option.method]( api[option.url], option.params ).then(res=>{ result = res.data }).catch(err=>{ result = err }) } return result } export default http
在main.js入口文件中引入封裝好的 /http/index.js 文件,示例代碼如下:
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import http from './http' Vue.config.productionTip = false Vue.prototype.$http = http Vue.use(Elementui) new Vue({ router, store, render: h => h(App) }).$mount('#app')
在App.vue根組件中測試axios請求,示例代碼如下:
<template> <div> <button @click="getDate">發送請求</el-button> </div> </template> <script> export default { methods: { getDate(){ this.$http({ method: 'get', url: 'users_find' }).then(res=>{ console.log(res) }) } } } </script>
這裡需要有 http://localhost:3000/users/find 接口,不然請求會失敗!
4、效果演示
啟動Vue項目,在瀏覽器中訪問Vue項目的地址,我的地址是 http://localhost:8080,點擊按鈕發送請求,獲取的結果如下圖所示。
到此,在Vue項目中就完成瞭簡單的axios封裝,你也可以根據自己的實際需求對axios進行封裝,本文隻是提供參考。
到此這篇關於Vue項目中如何封裝axios(統一管理http請求)的文章就介紹到這瞭,更多相關Vue封裝axios管理http請求內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3+vite+axios 配置連接後端調用接口的實現方法
- 使用vue3.x+vite+element-ui+vue-router+vuex+axios搭建項目
- vue如何封裝Axios的get、post請求
- vue中封裝axios並實現api接口的統一管理
- Vue為何棄用Ajax,選擇Axios?ajax與axios的區別?