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

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

vue中封裝axios并實現api接口的統一管理

瀏覽:30日期:2022-10-15 15:06:48

在vue項目中,我們通常都是使用axios與后臺進行數據交互,axios有很多好用的特性,這里不多做介紹,相關細節可以查閱axios中文網。在對axios進行封裝之前,我們要使用vue腳手架工具創建一個vue項目(這里我用的是cli4)。

安裝

cnpm install axios --save-dev; // 安裝axioscnpm install qs --save-dev; // 安裝qs模塊,用來序列化post類型的數據,否則后端無法接收到數據模塊引入

在src目錄下創建一個service目錄,用于存放接口封裝的相關文件。然后在service目錄中創建service.js,用于axios、qs模塊的引入,并在此文件中對axios進行封裝。代碼如下(接口域名只有一個的情況):

import axios from ’axios’ //引入axiosimport qs from ’qs’ //引入qs,用來序列化post類型的數據,否則后端無法接收到數據// 設置post請求頭axios.defaults.headers.post[’Content-Type’] = ’application/x-www-form-urlencoded;charset=UTF-8’;axios.defaults.withCredentials = false;//在跨域請求時,不會攜帶用戶憑證;返回的 response 里也會忽略 cookie//創建axios實例,請求超時時間為300秒const instance = axios.create({ timeout: 300000,});//請求和響應攔截可以根據實際項目需求進行編寫// 請求發起前攔截instance.interceptors.request.use((config) => {//這里可以對接口請求頭進行操作 如:config.headers[’X-Token’] = token console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})// 響應攔截(請求返回后攔截)instance.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})//按照請求類型對axios進行封裝const api={ get(url,data){return instance.get(url,{params:data}) }, post(url,data){return instance.post(url,qs.stringify(data)) }, }export {api}

上述代碼是接口域名只有一個的情況(多數情況),當接口域名有多個的時候(少數情況),我們需要對之前的封裝進行改造,代碼如下:

import axios from ’axios’ //引入axiosimport qs from ’qs’ //引入qs,用來序列化post類型的數據,否則后端無法接收到數據// 設置post請求頭axios.defaults.headers.post[’Content-Type’] = ’application/x-www-form-urlencoded;charset=UTF-8’;axios.defaults.withCredentials = false;//在跨域請求時,不會攜帶用戶憑證;返回的 response 里也會忽略 cookie//創建axios實例,請求超時時間為300秒,因為項目中有多個域名,所以對應的也要創建多個axios實例const instanceA = axios.create({ timeout: 300000,});const instanceB = axios.create({ timeout: 300000,});//如果項目為單一域名,這里可以不用進行配置,當項目接口有多個域名時,要對axios實例基礎路徑進行配置,否則在項目生產環境中無法進行區別調用if (process.env.NODE_ENV == ’production’) { instanceA.defaults.baseURL = ’https://www.production_a.com’; instanceB.defaults.baseURL = ’https://www.production_b.com’;}//請求和響應攔截可以根據實際項目需求進行編寫// 請求發起前攔截instanceA.interceptors.request.use((config) => {//這里可以對接口請求頭進行操作 如:config.headers[’X-Token’] = token console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})instanceB.interceptors.request.use((config) => { console.log('請求攔截',config); return config;}, (error) => { // Do something with request error return Promise.reject(error)})// 響應攔截(請求返回后攔截)instanceA.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})instanceB.interceptors.response.use(response => { console.log('響應攔截',response); return response;}, error => { console.log(’catch’, error) return Promise.reject(error)})//按照請求類型對axios進行封裝const api={ get(url,data){return instanceA.get(url,{params:data}) }, post(url,data){return instanceA.post(url,qs.stringify(data)) }, doGet(url,data){return instanceB.get(url,{params:data}) }, doPost(url,data){return instanceB.post(url,qs.stringify(data)) } }export {api}

上述代碼中有根據生產環境對axios實例的基礎路徑進行配置,如果項目中有多個環境(如:測試環境等),則需要對CLI4腳手架環境變量進行配置

api接口統一管理

將api接口按照功能模塊進行拆分,把同一模塊下的接口寫在同一個文件中進行統一管理,這樣代碼會更容易維護。比如我們的項目中有新聞模塊,音樂模塊等。我們就在serviec目錄中創建news.js、music.js文件,用于管理各自模塊的所有api接口,這里我只拿news.js文件為例,代碼如下:

import {api} from './service.js';const news={getNewsList(){//獲取新聞列表return api.get('api/news/getNewsList')},editNewsDetail(data){//修改新聞詳情return api.post('api/news/editNewsDetail',data);}}export default news;

為了更方便在項目中調用這些封裝好的接口,我們需要將這些接口掛載到vue的原型上,首先我們要在service目錄中創建api.js文件,將所有模塊的api管理文件引入進來,然后進行統一導出,代碼如下:

//引入相關api管理模塊import news from './news.js';//進行統一導出export default {news}

找到項目中的main.js文件,將接口掛載到vue的原型上,代碼如下:

import Vue from ’vue’import App from ’./App.vue’import router from ’./router’import store from ’./store’import axios from ’axios’Vue.prototype.axios=axiosVue.config.productionTip = falseimport api from './service/api.js';//將封裝的接口掛載到vue原型上Vue.prototype.$api = api;new Vue({ router, store, render: h => h(App)}).$mount(’#app’)

然后我們在項目創建完成時自動生成的模板文件App.vue調用封裝好的接口,代碼如下:

<template> <div id='app'> <div id='nav'><router-link to='/'>Home</router-link> |<router-link to='/about'>About</router-link><button @click='getN'>接口封裝getN</button><button @click='postN'>接口封裝postN</button> </div> <router-view/> </div></template><script>export default {methods:{getN(){this.$api.news.getNewsList().then((res)=>{console.log(res);})},postN(){let openid='oO5tQ5VMPpuzLqwfXhpmwjqwSANM';let productCodes='pro-1337270496655446016';this.$api.news.editNewsDetail({openid,productCodes}).then((res)=>{alert(res.data.msg);})}}}</script><style lang='scss'>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}#nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }}</style>配置代理

因為我們要在本地環境進行測試,這就涉及到了跨域問題,為了解決跨域問題,我們可以進行代理的配置,在項目根目錄中創建vue.config.js文件,然后可以對項目進行各種配置,代理的配置方法如下:

// vue.config.jsmodule.exports = { // 輸出文件目錄 outputDir: 'dist', // eslint-loader 是否在保存的時候檢查 lintOnSave: false, // 基本路徑 publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { host: 'localhost', port: 8080, open: true, hotOnly: true, // 熱更新 // 設置代理 proxy: { '/api': { // 本地mock服務器 target: 'https://www.xxxx.com/xxx/', changeOrigin: true, ws: false, }, //如果項目中存在多個域名接口,可依次進行配置'/apib':{target: 'https://www.xxxx.com/xxx/',changeOrigin: true,ws: false,}, }, },};

代理配置好了之后,就可以運行項目了,命令行中輸入npm run serve,項目啟動好了之后,就可以進入頁面點擊按鈕,測試之前做的封裝是否好用。

結語

以上就是本人對vue中封裝axios的一點心得,文章有錯誤或需要改進的地方還請與我聯系,我將及時進行更正,感謝閱讀。

以上就是vue中封裝axios并實現api接口的統一管理的詳細內容,更多關于vue 封裝axios的資料請關注好吧啦網其它相關文章!

標簽: IOS
相關文章:
主站蜘蛛池模板: 屏蔽服(500kv-超高压-特高压-电磁)-徐吉电气| 回转支承-转盘轴承-回转驱动生产厂家-洛阳隆达轴承有限公司 | 微型气象仪_气象传感器_防爆气象传感器-天合传感器大全 | 标准品网_标准品信息网_【中检计量】 | 布袋式除尘器|木工除尘器|螺旋输送机|斗式提升机|刮板输送机|除尘器配件-泊头市德佳环保设备 | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 定制奶茶纸杯_定制豆浆杯_广东纸杯厂_[绿保佳]一家专业生产纸杯碗的厂家 | 小型气象站_车载气象站_便携气象站-山东风途物联网 | 法钢特种钢材(上海)有限公司 - 耐磨钢板、高强度钢板销售加工 阀门智能定位器_电液动执行器_气动执行机构-赫尔法流体技术(北京)有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 安德建奇火花机-阿奇夏米尔慢走丝|高维|发那科-北京杰森柏汇 | 微水泥_硅藻泥_艺术涂料_艺术漆_艺术漆加盟-青岛泥之韵环保壁材 武汉EPS线条_EPS装饰线条_EPS构件_湖北博欧EPS线条厂家 | 广州各区危化证办理_危险化学品经营许可证代办 | 硬质合金模具_硬质合金非标定制_硬面加工「生产厂家」-西迪技术股份有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司 | 冻干机(冷冻干燥机)_小型|实验型|食品真空冷冻干燥机-松源 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 刚性-柔性防水套管-橡胶伸缩接头-波纹管补偿器-启腾供水材料有限公司 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | PC阳光板-PC耐力板-阳光板雨棚-耐力板雨棚,厂家定制[优尼科板材] | 智慧农业|农业物联网|现代农业物联网-托普云农物联网官方网站 | HDPE土工膜,复合土工膜,防渗膜价格,土工膜厂家-山东新路通工程材料有限公司 | 国际高中-国际学校-一站式择校服务-远播国际教育 | 等离子表面处理机-等离子表面活化机-真空等离子清洗机-深圳市东信高科自动化设备有限公司 | 天津货架厂_穿梭车货架_重型仓储货架_阁楼货架定制-天津钢力仓储货架生产厂家_天津钢力智能仓储装备 | 环讯传媒,永康网络公司,永康网站建设,永康小程序开发制作,永康网站制作,武义网页设计,金华地区网站SEO优化推广 - 永康市环讯电子商务有限公司 | 免费分销系统 — 分销商城系统_分销小程序开发 -【微商来】 | 搜活动房网—活动房_集装箱活动房_集成房屋_活动房屋 | 不锈钢管件(不锈钢弯头,不锈钢三通,不锈钢大小头),不锈钢法兰「厂家」-浙江志通管阀 | 通辽信息港 - 免费发布房产、招聘、求职、二手、商铺等信息 www.tlxxg.net | 宏源科技-房地产售楼系统|线上开盘系统|售楼管理系统|线上开盘软件 | 上海律师咨询_上海法律在线咨询免费_找对口律师上策法网-策法网 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 上海办公室设计_办公楼,写字楼装修_办公室装修公司-匠御设计 | 石家庄救护车出租_重症转院_跨省跨境医疗转送_活动赛事医疗保障_康复出院_放弃治疗_腾康26年医疗护送转诊团队 | 展厅装修公司|企业展厅设计|展厅制作|展厅搭建—广州展厅装饰公司 | 西门子伺服控制器维修-伺服驱动放大器-828D数控机床维修-上海涌迪 | 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 首页_欧瑞传动官方网站--主营变频器、伺服系统、新能源、软起动器、PLC、HMI | 预制舱-电力集装箱预制舱-模块化预制舱生产厂家-腾达电器设备 |