【Axios】前端页面使用axios调用后台接口

最新推荐文章于 2024-05-17 02:13:21 发布
最新推荐文章于 2024-05-17 02:13:21 发布
阅读量2.9k 收藏 17
点赞数 2
文章标签： 前端 后端 javascript ViewUI
原文链接：http://www.cnblogs.com/pengshengguang/p/8350542.html
版权
本文介绍了在一个Vue.js前端项目中如何使用axios调用Node.js后端接口。讨论了两种方式：1) 直接使用axios调用完整URL，2) 通过封装axios创建HTTP请求基类，简化调用。通过封装，可以在调用后端接口时避免每次都写完整的URL，提高代码的简洁性和可维护性。
摘要由CSDN通过智能技术生成

 

项目基本情况

前端项目是用vue.js做的，前端起的服务URL：http://localhost:8080/

后端项目是用Node.js做的，后端起的服务URL：http://localhost:3000/

现在前端要调用后端服务其中一个接口，URL：http://localhost:3000/goods，这个接口需要3个参数（page，pageSize，sort）

 

有如下两种方式来调用后端接口： 

1）直接调用axios请求后端服务

如果你直接在界面上使用axos调用后端接口，你需要在axios里面写完整的后端接口url

最低0.47元/天 解锁文章
ass201295
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的直接用axios调用接口的方法（详细）
qq_45596887的博客
08-20 6160
不封装的request的情况下使用axios调取后端数据
接口调用--axios
weixin_51386631的博客
09-28 153
接口调用–axios 1.常用API： get:查询数据 post:添加数据 put:修改数据 delete:删除数据 2.基本用法 ret:自定义参数名 .data: 获取后台实际数据 ，写法固定 3.GET传参 （1）URL传参数 传统 axios.get('http://localhost:3000/axios?id=123').then(function(ret){ console.log(ret.data) }) // 接口 app.get('/axios',(req,res)=>{
Web前端最全前端如何调用后端接口进行数据交互（极简）_前端调用后端接口，2024我的前端大厂面试之旅
2401_84447362的博客
05-17 440
很明显，大家看看应该就明白了，前端发请求时可以携带数据，比如账号、密码啊等等，后端接收后，就可以处理啦，然后把处理结果返回给前端，前端接收后，就可以渲染了，或者给出操作成功的提示。这里的axios就是我们发起请求所必备的文件，这些文件在文章末尾会有给出。
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（五）配置 Axios api 接口调用文件
kchangfu的博客
12-02 1112
前情回顾 在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（四）调整 App.vue 和 router 路由》，我们通过配置基本的信息，已经让我们的项目能够正常的跑起来了。但是，这里还没有涉及到 AJAX 请求接口的内容。 vue 本身是不支持 ajax 接口请求的，所以我们需要安装一个接口请求的 npm 包，来使我们的项目拥有这个功能。
axios调用接口
A5120184120的博客
08-30 215
【代码】axios调用接口。
axios的接口调用
weixin_45630345的博客
08-09 1705
1. axios的基本特性 axios（官网）是一个基于Promise用于浏览器和node.js的HTTP客户端。 它具有以下特征： 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 2. axios的基本用法 //引入axios.js axios.get('/adata') .then(ret => { //data属性名称是固定的，用于获取后台响应的数据 console.log(ret.data) }) 3. axios的常用API g
VUE使用axios调用后台API接口的方法
11-19
我们都知道VUE更多是注重前段用户界面的渲染合操作，但是如果想到实现前后端之间的交互调用后台API，就需要借助其他组件，如今天要讲到的Axios，下边就重点讲解axios在vue中的使用。  Axios，基于 Promise 的 HTTP ...
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
总结来说，处理Vue中axios连续请求导致的返回数据混乱问题，可以采取与后端优化接口、使用Promise.all来控制请求顺序以及利用axios的CancelToken来取消不必要的请求。通过这些方法，我们可以有效地维护数据的一致性...
博客前端后台分离静态页面源码.zip
04-21
后端开发者会编写API接口，这些接口通常遵循RESTful架构，提供GET、POST、PUT、DELETE等操作，供前端调用以获取或修改数据。 “博客”功能可能涉及以下后端服务： 1. **用户认证**：包括注册、登录、权限验证等，...
axios-0.17.0.zip
最新发布
06-10
这在用户交互中非常实用，例如，当用户离开页面或取消操作时，可以取消正在后台进行的请求，防止不必要的资源消耗。 最后，Axios库体积小，性能优秀，且兼容性良好，支持所有现代浏览器以及IE9以上版本。它的源代码...
解决vue中axios设置超时(超过5分钟)没反应的问题
10-14
在Vue项目中，当使用axios进行HTTP请求时，可能会遇到设置超时时间（例如超过5分钟）后，请求没有响应的问题。这个问题主要是由于浏览器自身的限制，尤其是Chrome浏览器，默认的请求超时时间是5分钟。因此，如果你的...
axios请求接口http_axios调用接口
weixin_39746229的博客
12-22 792
axios调用接口1. 按照axiosnpm install --save-dev axios2.在main.js 引入axios,设置全局属性$http 指向axiosmain.jsimport axios from 'axios'Vue.prototype.$http = axios3.data中定义一个变量return {testData: []}}methods中定义调用API数据的方法m...
简单快速axios调用接口
weixin_50903837的博客
08-03 274
axios引用
接口调用-axios用法
Mint周的文章
10-26 1627
接口调用-axios用法 4.1 axios的基本特性 axios（官网：https://github.com/axios/axios）是一个基于Promise用于浏览器和node.js的HTTP客户端。 它具有以下特征：·支持浏览器和node.js ·支持promise ·能拦截请求和响应 ·自动转换JSON数据 <script type="text/javascript" src="js/axios.js"></script> <script type="text
Ajax 和 axios 调用接口的使用
m0_61663332的博客
12-28 1544
Ajax 和 axios 调用接口的使用测试GET：1. 选择请求方式，2. 填写URL地址，3. 填写参数，4. 点击Send发送，5. 查看响应结果 测试POST：1. 选择请求方式，2. 填写URL地址，3. 选择body面板勾选数据格式x-www，4. 填写发送数据，4. 点击Send发送，5. 查看响应结果 场景：用户名检测 / 搜索提示 / 数据分页显示(跳转不刷新页面) / 数据的增删改查
【前端+后端】前后端分离之——前后端axios通信
weixin_44917754的博客
07-06 3394
前后端通过axios通信，使前端能通过axios来调用后端接口 1. 前端安装axios 在前端Terminal中输入npm install axios或者vue add axios(根据vue版本来选择)来安装axios 2. 前端配置axios 配置axios来调用后端接口。注意：可根据不同应用场景将配置代码添加到不同地方。这里以页面刷新就调用接口来举例。该配置写在前端中。 mounted() { const _this = this axios.get('http://localhos
axios请求接口的方式
南栀@的博客
05-24 308
部分更新服务器上的数据（例如：只更新新用户的手机号）删除服务器上的数据。
axios在后台请求的数据怎么遍历到页面上
06-06
在前端页面中使用 Axios 向后台发送数据请求，一般需要遵循以下步骤： 1.导入 Axios 库，并初始化配置。 2.在需要请求数据的页面中，使用 Axios 发送 HTTP 请求，并接收返回的数据。 3.将返回的数据解析成 JavaScript 对象格式，然后通过遍历将数据渲染到需要展示的位置上。 下面分别对这些步骤进行简要介绍。 1.导入 Axios 库，并初始化配置。 在前端的 JS 文件中，首先需要按照以下方式封装 Axios，然后引入并配置。 ``` import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', timeout: 1000 }); export default instance; ``` 在这段代码中，我们创建了一个 Axios 实例 instance ，并设置了访问后台数据请求地址的 baseURL ，以及请求超时时间。 2.在需要请求数据的页面中，使用 Axios 发送 HTTP 请求，并接收返回的数据。 在需要请求数据的页面中，使用 Axios 实例的 get() 或 post() 方法，发送数据请求，并接收 HTTP 响应结果。 ``` instance.get('/api/user/1') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 这段代码中，我们调用了 instance.get() 方法，使用 GET 方式向后台请求数据。其中，参数 '/api/user/1' 是需要请求的地址。成功时，在控制台中打印返回的数据；失败时，在控制台中输出错误。 3.将返回的数据解析成 JavaScript 对象格式，然后通过遍历将数据渲染到需要展示的位置上。 在控制台中，我们可以看到后台返回的 JSON 格式数据。需要将数据解析成 JavaScript 对象格式，然后遍历展示到页面上。 ``` let users = response.data; let html = ''; for (let user of users) { html += ` <div class="user"> <p class="name">${user.name}</p> <p class="age">${user.age}</p> </div>`; } document.querySelector('#user-list').innerHTML = html; ``` 在这段代码中，我们将后台返回的数据解析成 users 对象数组，并使用 for 循环遍历每个用户。然后，使用 html 模板字符串，将每个用户的 name 和 age 渲染到页面上的 .user 元素中。最后，使用 document.querySelector() 找到需要展示用户信息的容器 #user-list ，并将 html 内容更新到该容器内。 以上就是使用 Axios 获取后台数据，并把数据渲染到页面上的步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值