码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-01-25 13:09:01      阅读:1546      评论:0      收藏:0      [点我收藏+]

标签:axios   src   ima   pos   ret   tps   img   http请求   .com   

 

前端项目是用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

技术分享图片

 

但是,你觉得这样是不是觉得,每次都要写完整的接口url,这样会很繁琐呢?我只要调用后端/goods/这个接口就行了,有没有一种办法,可以去掉 http://localhost:3000/ 这个前缀呢?答案是可以的,这就需要另外写一个js,来封装axios,成为一个http请求的基类。

 

2)通过对axios库封装成一个http请求的基类

技术分享图片

 

定义了Http基类,我们就要调用他。

 

首先是在需要使用http请求的vue组件中引入 Httpservice.js 

import Httpservice from ‘@/services/HttpService‘

在data()里面,把Httpservice赋值给http变量,便于后面调用

export default {
    data () {
      return {
        http: Httpservice.getAxios,
      }
    }
}

  

然后通过http请求后端接口

技术分享图片

 

这样调用后端接口是不是就简洁了很多呢?嘻嘻!

 

 

---end---

 

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

标签:axios   src   ima   pos   ret   tps   img   http请求   .com   

原文地址:https://www.cnblogs.com/pengshengguang/p/8350542.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!