电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue項目中如何封裝axios(統一管理http請求)

瀏覽:3日期:2022-09-30 11:22:20
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 = falseVue.prototype.$http = httpVue.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請求內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: IOS
相關文章:
主站蜘蛛池模板: 东莞喷砂机-喷砂机-喷砂机配件-喷砂器材-喷砂加工-东莞市协帆喷砂机械设备有限公司 | 杭州代理记账多少钱-注册公司代办-公司注销流程及费用-杭州福道财务管理咨询有限公司 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 小型气象站_便携式自动气象站_校园气象站-竞道气象设备网 | 吉林污水处理公司,长春工业污水处理设备,净水设备-长春易洁环保科技有限公司 | 蜘蛛车-高空作业平台-升降机-高空作业车租赁-臂式伸缩臂叉装车-登高车出租厂家 - 普雷斯特机械设备(北京)有限公司 | 液压压力机,液压折弯机,液压剪板机,模锻液压机-鲁南新力机床有限公司 | 东莞韩创-专业绝缘骨架|马达塑胶零件|塑胶电机配件|塑封电机骨架厂家 | 学校用栓剂模,玻璃瓶轧盖钳,小型安瓿熔封机,实验室安瓿熔封机-长沙中亚制药设备有限公司 | 北京成考网-北京成人高考网 | 5L旋转蒸发器-20L-50L旋转蒸发器-上海越众仪器设备有限公司 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 铆钉机|旋铆机|东莞旋铆机厂家|鸿佰专业生产气压/油压/自动铆钉机 | 手板-手板模型-手板厂-手板加工-生产厂家,[东莞创域模型] | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 气动调节阀,电动调节阀,自力式压力调节阀,切断阀「厂家」-浙江利沃夫自控阀门 | 电车线(用于供电给电车的输电线路)-百科 | 粘度计NDJ-5S,粘度计NDJ-8S,越平水分测定仪-上海右一仪器有限公司 | 全自动实验室洗瓶机,移液管|培养皿|进样瓶清洗机,清洗剂-广州摩特伟希尔机械设备有限责任公司 | 劳动法网-专业的劳动法和劳动争议仲裁服务网 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 首页|光催化反应器_平行反应仪_光化学反应仪-北京普林塞斯科技有限公司 | 灰板纸、灰底白、硬纸板等纸品生产商-金泊纸业 | 拖鞋定制厂家-品牌拖鞋代加工厂-振扬实业中国高端拖鞋大型制造商 | 真空搅拌机-行星搅拌机-双行星动力混合机-广州市番禺区源创化工设备厂 | 齿式联轴器-弹性联轴器-联轴器厂家-江苏诺兴传动联轴器制造有限公司 | 胀套-锁紧盘-风电锁紧盘-蛇形联轴器「厂家」-瑞安市宝德隆机械配件有限公司 | 垃圾处理设备_餐厨垃圾处理设备_厨余垃圾处理设备_果蔬垃圾处理设备-深圳市三盛环保科技有限公司 | 变压器配件,变压器吸湿器,武强县吉口变压器配件有限公司 | 搜活动房网—活动房_集装箱活动房_集成房屋_活动房屋 | 检验科改造施工_DSA手术室净化_导管室装修_成都特殊科室建设厂家_医疗净化工程公司_四川华锐 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 生物颗粒燃烧机-生物质燃烧机-热风炉-生物颗粒蒸汽发生器-丽水市久凯能源设备有限公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | LED太阳能中国结|发光红灯笼|灯杆造型灯|节日灯|太阳能灯笼|LED路灯杆装饰造型灯-北京中海轩光电 | 叉车电池-叉车电瓶-叉车蓄电池-铅酸蓄电池-电动叉车蓄电池生产厂家 |