vue封装API接口

最新推荐文章于 2024-07-19 16:42:54 发布
最新推荐文章于 2024-07-19 16:42:54 发布
阅读量4k 收藏 34
点赞数 3
分类专栏： vue 文章标签： css3 css jquery vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47592687/article/details/109433429
版权

浅谈一下如何在vue项目中封装API

api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包（指令：npm i axios --save）。
api的封装主要的目的就是：在帮助我们简化代码和后期的更新维护

在前端vue的开发中，有一点是必须要做的，那就是将所有的API接口封装起来，因为从开发到最终上线的过程中，API是需要经常更换的，所以需要将API封装起来，便于修改和更换。
那么，如何封装API呢？
首先我们先创建一个文件夹API
在这里插入图片描述

然后在里面创建三个js文件 ，分别是core.js(核心文件) config.js(配置文件) index.js(入口文件)

然后我们在核心文件中
1、首先创建一个axios实例 里面写baseURl和超时时间
2、抛出一个函数来判断是 get还是post请求
3、封装返回请求的方式，
4、在核心文件里引入配置文件里面的请求封装方式；
在这里插入图片描述

（2）在配置文件中 1、封装请求方式和请求路径
在这里插入图片描述

（3）在入口文件中 1、引入核心文件和配置文件 2、在一个对象里封装一 个函数 return返回请求方式、地址和参数 ;3、抛出去这个对象；
在这里插入图片描述

（4）最后把入口文件里面的对象引入到man.js 里面，全局注册一下，Vue.prototype.$函数名=函数名就好啦，到这里我们就把api给封装好啦

祎祎呀
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue封装api接口
weixin_46031162的博客
04-22 221
vue axios封装以及API统一管理 在vue项目中，每次和后台交互的时候，经常用到的就是axios请求数据，它是基于promise的http库，可运行在浏览器端和node.js中。当项目越来越大的时候，接口的请求也会越来越多，怎么去管理这些接口?多人合作怎么处理?只有合理的规划，才能方便往后的维护以及修改， 第一步安装axios cnpm install axios --save // 只有安装了淘宝镜像之后才可以使用cnpom npm install axios --save // 这是没有安
如何使用vue封装api接口详解
qq_45955475的博客
11-01 2361
第一步： 本文使用axios请求，先在require中配置服务器请求拦截，并添加token，本文模拟token添加1111，域名使用的本地域名，需要自己配置一下。token可以使用cookie，放入cookie中获取添加当请求头中。 import axios from ‘axios’ // 创建axios对象 let service = axios.create({ baseURL: 'http://127.0.0.1:3001', // 请求接口的域名 timeout: 9000 // 请求的超.
总结：vue中Axios的封装-API接口的管理.md
07-30
关于vue中axios二次封装的方法，以及api的统一管理。 主要提及vue中request的配置详情编写，element-ui组件中提示框的使用方法
Vue中如何封装接口
最新发布
ggq53219的博客
07-19 420
在Vue项目中封装接口通常是指将HTTP请求（如GET、POST等）封装成可复用的函数或方法，以便于在组件中方便地调用。这样的封装有助于减少代码重复，增强代码的可维护性和可读性。以下是一个基于Vue和Axios（一个基于Promise的HTTP客户端，用于浏览器和node.js）的接口封装示例。
vue如何封装api
wangqiao666888的博客
12-31 1595
1.先下载引入 引入与创建axios的实例 server.js文件 1.引入axios import axios from 'axios'; //创建axios的实例 const server = axios.create({ baseURL:'http://api.i120'//z整个项目的默认地址 timeout：5000，//请求超时时间的设置 }) 2.请求拦截 可以进行请求头设置，loadiing的开启等操作 1.对请求的拦截做出相应 server.interceptors.reque
vue入门：对vue项目中api接口的封装管理
qq_40126542的博客
04-19 4868
小编推荐：Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。 很多朋友在开发过程中，习惯性直接将api的调用写在单个组件之中，就直接调用请求。例如： 在前端项目开发中，从整体架构出发，我们可以将项目中所有api进行封装，从而便于我们进行统一管理。 在src目录下，新...
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
Vue 项目 API 接口封装
weixin_41990299的博客
08-12 190
Vue 项目 API 接口封装 参考： https://axios-http.com/ https://cli.vuejs.org/zh/guide/mode-and-env.html https://codeantenna.com/a/B9ng1xY7vQ https://stackoverflow.com/questions/43013858/how-to-post-a-file-fro...
Vue中的封装api
01-08
我做vue和react的项目都是用的这一套api（时间戳是我新加的），接口，方法分开，便于管理。 sever.js import axios from 'axios' import qs from 'qs' /** * 自定义实例默认值 */ const instance = axios.create({ timeout: 15000, // 请求超时时间 withCredentials: true }) /** * 添加请求拦截器 ，意思就是发起请求接口之前做什么事，一般都会发起加载一个loading */ instance.interceptors.request.use(
vue接口api封装
w_0217的博客
08-11 252
vue接口api封装 在utils文件夹中创建一个config.js文件 在config.js文件中需要调用axios import axios from 'axios' // http://192.168.2.115:8003/api/Price/PriceList //公共路径 let host = '/api' // 获取主页信息 export const getindex = params => { return axios.get(`${host}/api/Price/PriceList
vue项目-封装API接口
H_c_l的博客
08-27 532
1.在/src/下创建一个js文件 AxiosAsk.js import Vue from 'vue' import axios from 'axios' var vm = ''; Vue.prototype.thisVm = function(_this) { vm = _this; } const APIASK = (url, type, data) => { let hostUrl...
vue项目 API接口封装
dccose的博客
11-09 3405
vue项目 API接口封装
vue项目中接口api的封装
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
09-06 286
在utils下的axiosAPI.js 在src下的api文件夹中创建每个页面的api 在页面中可以直接使用了
vue项目中封装api接口模块
zhaoyin1994的博客
05-17 295
在项目的src根目录下新建一个api文件，里面存放各个模块的接口请求。将请求封装成方法，统一存放到api模块，与页面分离。：在对应的功能模块中按需导入封装的方法并使用。在单独封装的login模块中发送登录相关请求。2.相同的请求可以直接复用。1.请求与页面逻辑分离。3.请求进行了统一管理。
Vue 项目API接口封装(详细解答)
fzy_1939的博客
07-20 8250
我们在开发的过程中，时常需要去访问服务器，然而每个请求都需要重新去axios访问，过于麻烦，所以我们在这封装了一个进行请求的方法，并且将接口api化，需要使用时直接引入api方法,使用起来非常的简单。......
vue接口怎么封装
m0_74079165的博客
09-13 573
通过这种方式，你可以封装所有的接口请求，并在Vue组件中轻松地调用它们。3. 在`index.js`文件中，使用`axios`或其他HTTP库来发送请求。在Vue中，可以通过封装接口来实现与后端API的交互。2. 在`api`文件夹中创建一个`index.js`文件，用于导出所有的接口方法。1. 创建一个文件夹来存放接口文件，比如`api`文件夹。// DELETE请求示例。// 定义接口的基本URL。// POST请求示例。// GET请求示例。// PUT请求示例。// 在组件中引入api。
Vue.js 中的API接口封装实战与详解
Play_Sai的博客
06-28 800
在开发Web应用的过程中，我们常常需要和服务器进行数据交互，这就涉及到了API接口的调用。在Vue.js项目中，为了提高代码复用性、可维护性和降低错误率，我们将API接口进行合理的封装显得尤为重要。本文将详细介绍如何在Vue.js项目中实现API接口的封装。
vue3封装api接口
05-01
Vue3中封装API接口是一个常见的任务，因为这是在Vue应用程序中使用API的主要方式。在Vue3中，我们可以使用Axios这个工具来处理HTTP请求。Axios对于Vue应用程序非常有用，并且能够轻松地编写模块化、可重用的API代码...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值