浅谈在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验证是否为数字的总结
Apr 14 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
js左侧多级菜单动态的解决方案
2010/02/01 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
浅析vue-router原理
2018/10/19 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue实现选中效果
2020/10/07 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
软件测试面试题
2015/10/21 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
服务员岗位职责
2014/01/29 职场文书
节约电力资源的建议书
2014/03/12 职场文书
网络优化专员求职信
2014/05/04 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年化验员工作总结
2014/11/18 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
MySQL 如何设计统计数据表
2021/06/15 MySQL
python flappy bird小游戏分步实现流程
2022/02/15 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript