vue的接口统一管理

傷城~ 2021-08-13 23:03 428阅读 0赞

第一步：在src文件下创建一个api文件夹，其中新建一个api.js文件，其中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

第二步：在main.js中引入

import api from './api/api'
    (引入api.js)
    
    Vue.prototype.APIurl = api
    (将引入的api绑定在vue的原型)

绑定在原型上，在组件中我们就可以通过this去获取，例如

第三步：使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1][]

在data中定义的handleOrder这些，就可以直接充当请求中的url

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/7a70cce926634631931f0c49995c6495.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 1]: /images/20210813/33213dd076514ba99267c3160473d359.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70 2]: /images/20210813/9dfbc7b48d604164a44cabbfe18701e3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，428人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue项目中封装axios 统一管理http请求

1、需求说明在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。 2、Vue项目结

超、凢脫俗/ 2023年01月15日 04:56/ 0 赞/ 165 阅读

相关【vue】vue统一管理全局组件

> `前言` 转载：[https://www.cnblogs.com/zjw2004112/p/11518767.html][https_www.cnblogs.com_zj

待我称王封你为后i/ 2022年11月22日 12:46/ 0 赞/ 175 阅读

相关 vue配置后台请求接口地址的统一前缀

> 请求方式使用的是`axios`，在`main.js`中添加`baseURL` > 在下面配置中加上`axios.defaults.baseURL = 'http://

男娘i/ 2022年11月14日 14:40/ 0 赞/ 870 阅读

相关使用Spring进行统一日志管理 + 统一异常管理

[使用Spring进行统一日志管理 + 统一异常管理 ][Spring_ _ _] 分类： [ Spring][Spring] 2012-09-24 10:37 366

Dear 丶/ 2022年09月18日 13:54/ 0 赞/ 196 阅读

相关 vue项目中axios请求接口的统一管理

> 在vue项目中，会使用到axios去调用接口，我们可以创建一个api文件夹，在内部创建js文件，以页面命名，将同页面的接口放入一个js文件中，这样方便管理 > api内

今天药忘吃喽~/ 2022年09月09日 14:59/ 0 赞/ 161 阅读

相关 Vue 接口管理

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

向右看齐/ 2022年04月24日 10:46/ 0 赞/ 149 阅读

相关 vue入门：对vue项目中api接口的封装管理

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

傷城~/ 2022年02月17日 07:28/ 0 赞/ 172 阅读

相关 vue+element-统一管理线上线下接口

需求分析 > 我们在使用后端提供的接口的过程中，都是先在线下测试结束，没有问题以后才会将代码部署到线上，这样才保证线上的代码是没有问题的。所以如果只有一个接口和一个页面的

青旅半醒/ 2022年01月23日 10:55/ 0 赞/ 198 阅读

相关 vue的接口统一管理

第一步：在src文件下创建一个api文件夹，其中新建一个api.js文件，其中 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

傷城~/ 2021年08月13日 23:03/ 0 赞/ 429 阅读

相关 Vue之api统一管理设计

1、基本思路：首先将axios导出，再将axios导入到一个独立的api文件夹中，在api文件夹j建立一个js文件，在这个js文件中将登录，增删改查操作封装起来，在这些...

骑猪看日落/ 2021年05月03日 05:45/ 0 赞/ 497 阅读