Vue項目中如何封裝axios(統(tǒng)一管理http請求)
在使用Vue.js框架開發(fā)前端項目時,會經(jīng)常發(fā)送ajax請求服務(wù)端接口,在開發(fā)過程中,需要對axios進(jìn)一步封裝,方便在項目中的使用。
2、Vue項目結(jié)構(gòu)在本地創(chuàng)建Vue項目,目錄結(jié)構(gòu)如下:
- public 靜態(tài)資源文件 - src |- assets 靜態(tài)資源目錄 |- components 公共組件目錄 |- http axios封裝目錄 |- router 路由管理目錄 |- store 狀態(tài)管理目錄 |- views 視圖組件目錄 |- App.vue 根組件 |- main.js 入口文件 - package.json npm配置文件
在Vue項目中創(chuàng)建 http目錄 作為axios的管理目錄,在 http目錄 下兩個文件,分別是
/http/index.js 封裝axios方法的文件 /http/api.js 統(tǒng)一管理接口的文件 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’//創(chuàng)建axios實例對象let instance = axios.create({ baseURL: ’http://localhost:3000’, //服務(wù)器地址 timeout: 5000 //默認(rèn)超時時長})//請求攔截器instance.interceptors.request.use(config=>{ //此處編寫請求攔截的代碼,一般用于彈出加載窗口 console.log(’正在請求……’) return config},err=>{ console.error(’請求失敗’,err)})//響應(yīng)攔截器instance.interceptors.response.use(res=>{ //此處對響應(yīng)數(shù)據(jù)做處理 console.log(’請求成功!’) return res //該返回對象會傳到請求方法的響應(yīng)對象中},err=>{ // 響應(yīng)錯誤處理 console.log(’響應(yīng)失敗!’,err) // return Promise.reject(err);})//封裝axios請求方法,參數(shù)為配置對象//option = {method,url,params} method為請求方法,url為請求接口,params為請求參數(shù)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 = falseVue.prototype.$http = httpVue.use(Elementui)new Vue({ router, store, render: h => h(App)}).$mount(’#app’)
在App.vue根組件中測試axios請求,示例代碼如下:
<template> <div> <button @click='getDate'>發(fā)送請求</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,點擊按鈕發(fā)送請求,獲取的結(jié)果如下圖所示。
到此,在Vue項目中就完成了簡單的axios封裝,你也可以根據(jù)自己的實際需求對axios進(jìn)行封裝,本文只是提供參考。
到此這篇關(guān)于Vue項目中如何封裝axios(統(tǒng)一管理http請求)的文章就介紹到這了,更多相關(guān)Vue封裝axios管理http請求內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. JAMon(Java Application Monitor)備忘記2. SpringBoot+TestNG單元測試的實現(xiàn)3. Java GZip 基于內(nèi)存實現(xiàn)壓縮和解壓的方法4. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法5. Docker容器如何更新打包并上傳到阿里云6. VMware中如何安裝Ubuntu7. Springboot 全局日期格式化處理的實現(xiàn)8. python 浮點數(shù)四舍五入需要注意的地方9. idea配置jdk的操作方法10. 完美解決vue 中多個echarts圖表自適應(yīng)的問題
