vue的接口统一管理

傷城~ 2021-08-13 23:03 468阅读 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 条评论，468人围观）

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

相关阅读

相关 vue配置axios统一管理后端接口API

一、安装axios 执行命令安装：npm install axios --save-dev 二、创建request.js引入axios 在src目录下新建文件夹util

忘是亡心i/ 2023年09月26日 16:22/ 0 赞/ 11 阅读

相关 vue项目中接口统一分装(vue二次分装axios）

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的

Dear 丶/ 2023年09月25日 12:12/ 0 赞/ 6 阅读

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

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

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

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

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

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

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

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

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

相关 Vue 接口管理

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

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

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

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

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

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

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

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

相关 vue的接口统一管理

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

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

相关 Vue之api统一管理设计

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

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