vue-cli 里axios的使用

1、axios的安装

cnpm i axios --save

2、axios的引入

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入
为了解决这个问题，那么就可以使用在原型链上挂载的方法传入到各个组件具体方法如下(在vue-cli里面的static里的文件是可以通过网址来访问的,而其他的文件是不能够被访问的)

//首先在main.js中引入
import axios from 'axios'
//这时在其他组件中是无法使用的，要么在各个组件中引入axios，要么就在原型链上挂载这个方法
Vue.prototype.$http= axios

3、axios的配置与使用

通过原型链上挂载的方法，那么就可以在各个组件中使用了

methods: {getData() {this.$http.get('/app/v1/get-json').then(this.getDataList).catch(this.error);},getDataList(res) {console.log(res);},error(err) {console.log(err);}
},
mounted() {this.getData();
}

通用axios的配置

//get请求
axios.get('app/v1/get-data', {first:'this is first'second:'this is second' }
})
//post请求
axios.post('app/v1/get-data', {first:'this is first'second:'this is second' }
})
//也可以进行配置来发送请求
//发送一个`POST`请求,注意this的指向问题,可以用箭头函数,也可以用bind(this)来更正this的指向问题
axios({method:"POST",url:'/app/v1/get-data',data:{name:"virus" }
}).then(function(res){}.bind(this)).catch(function(err){})

axios利用ES6技术可以实现多个请求同时发送接收

function getUserAccount(){return axios.get('/app/v1/get-data');
}
function getUserPermissions(){return axios.get('/app/v1/get-json');
}
axios.all([getUserAccount(),getUserPermissions()]).then(axios.spread(function(acct,perms){//当这两个请求都完成的时候会触发这个函数，两个参数分别代表返回的结果}))

axios 已经支持了各种请求方式

axios.request(config);axios.get(url[,config]);axios.delete(url[,config]);axios.head(url[,config]);axios.post(url[,data[,config]]);axios.put(url[,data[,config]])axios.patch(url[,data[,config]])

4、配置本地的请求地址来适配线上环境，避免线上线下请求地址的频繁更改

methods: {getData() {// 本地需要访问的是的地址是‘/static/data/index.json’,但是线上的地址是'/app/v1/get-json'这个时候就需要配置一下地址了axios.get('/app/v1/get-json').then(this.getDataList).catch(this.error);},getDataList(res) {console.log(res);},error(err) {console.log(err);}
},
mounted() {this.getData();
}

如何配置

　　a、打开项目下的config->index.js的文件

　　b、在dev下面的proxyTable配置项中进行配置具体如下

proxyTable: {'/app': {//线下的URL地址target: 'http://localhost:8080',pathRewrite: {//当访问线上地址的的时候，会默认适配到对应的线下地址'^/app/v1/get-data': '/static/data/index.json','^/app/v1/get-json': '/static/data/index.json'}}
},

转载于:https://www.cnblogs.com/rickyctbu/p/9834061.html

vue-cli 里axios的使用相关推荐

前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录基本概念关键代码基本概念这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项如下的请求: methods:{getData(){axios.all([ ...
Vue CLI 3 多页应用项目的搭建
在项目初期时,从零开始搭建和配置本地前端开发环境是一项很繁琐的工作,需要考虑到项目目录结构.项目基本配置.Webpack 配置等等.通过 Vue CLI 3 可以快速的生成一个项目,这样我们就可以专注 ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
Vue进阶——Vue CLI
Vue进阶--Vue CLI 前言一.什么是Vue CLI? 二.怎么安装Vue CLI? 1.Node 版本要求 2.已安装旧版本 3.安装完成三.Vue CLI 基础运用 1.Vue ui项目 ...
【 Vue全家桶 · Vue CLI（四）】Vue项目的详细目录结构解析
文章目录前言 -- 一级目录解析一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
vue里面使用axios跨域问题
前端解决: 打开main.js文件有config文件夹时: 在config/index.js 里面找到proxyTable :{} ,然后在里面加入以下代码 // 配置多个代理proxy: {&qu ...
vue连线插件_【Vue CLI】手把手教你撸插件
现如今 Vue 作为主流的前端框架之一,其健全的配套工具,活跃的开源社区,让广发码农热衷追捧.Vue CLI 作为其官方的开发构建工具,目前已更新迭代到 4.x 版本,其内部集成了日常开发用到的打包压 ...
VSCode 搭建Vue开发环境之Vue CLI
2019独角兽企业重金招聘Python工程师标准>>> 一.简介说明 1.关于VS Code开发工具,安装和配置,更多可以参考以前文章 2.关于Vue.js,Vue是一个优秀的渐进式 ...
Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

vue-cli 里axios的使用

vue-cli 里axios的使用相关推荐

最新文章

热门文章