浅谈在Vue-cli里基于axios封装复用请求


Posted in Javascript onNovember 06, 2017

本文介绍了浅谈在Vue-cli里基于axios封装复用请求,分享给大家,具体如下:

安装

只用安装一个axios就可以了。

npm install axios --save

接口代理设置

为了请求可以正常发送,我们一般要进行一个接口代理的配置,这样可以避免请求跨域,项目打包之后,后端一般也要搭建一个nginx之类的东西进行转发请求,不然请求会因为跨域问题失败的。

//文件位置:config/index.js
proxyTable: {
 '/api': {
  target: 'http://47.95.xxx.246:8080', // 通过本地服务器将你的请求转发到这个地址
  changeOrigin: true, // 设置这个参数可以避免跨域
  pathRewrite: {
   '/api': '/'
  }
 },
},

浅谈在Vue-cli里基于axios封装复用请求 

设置好了之后,当你在项目中要调用 http://47.95.xxx.246:8080 这个服务器里面的接口,可以直接用 /api 代替服务器地址。

发起请求

main.js入口文件中:

import axios from 'axios';//引入文件
Vue.prototype.$http = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$http使用

没有封装发起请求:

//没有封装的时候,在组件中发起请求的方式:
  this.$ajax({
    url:'/api/articles',//api 代理到json文件地址,后面的后缀是文件中的对象或者是数组
    method:'get',//请求方式
    //这里可以添加axios文档中的各种配置
   }).then(function (res) {
    console.log(res,'成功');
   }).catch(function (err) {
    console.log(err,'错误');
   })
//还可以像下面这么简写
 this.$ajax.get('api/publishContent').then((res) => {
  console.log(res,'请求成功')
 },(err)=>{
  console.log(err,'请求失败');
 });

封装请求

封装的时候,我通常喜欢把请求抽象成三个文件,文件位置放在src中,只要你能引用到,就没问题,如下图所示:

浅谈在Vue-cli里基于axios封装复用请求 

创建三个.js文件,里面我都很认真的注释了,我就直接贴图片了,在文末我把这三个文件的地址发出来,需要的小伙伴自取。

fetch.js:

浅谈在Vue-cli里基于axios封装复用请求 

url.js:

浅谈在Vue-cli里基于axios封装复用请求 

api.js

浅谈在Vue-cli里基于axios封装复用请求 

在组件里面如何使用接口:

浅谈在Vue-cli里基于axios封装复用请求 

封装axios文件地址在这里:传送门

代码注释什么的,已经蛮多了,跟着文章一步一步走,实现封装axios请求,没毛病的。本文并没有把很多功能都完整的列出来,主要是追求一个上手,剩下的东西,各位小伙伴们可以自行研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js快速排序的实现代码
Dec 08 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
基于vue实现分页效果
Nov 06 #Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
You might like
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python实现的彩票机选器实例
2015/06/17 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
python监控nginx端口和进程状态
2019/09/06 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
Reformation官网:美国女装品牌
2018/09/14 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
活动策划邀请函
2014/02/06 职场文书
物理教学随笔感言
2014/02/22 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers