本文实例讲述了Vue学习之axios的使用方法。分享给大家供大家参考,具体如下:
Axios 是一个用于实现网络数据请求的JavaScript库,可以用在网页和 node.js 中,用于创建 XMLHttpRequests,vue官方支持使用axios代替vue--resourse来实现网络数据请求。
使用前需要在你的项目中安装axios,例如通过npm安装库:
npm install --save axios
接着在项目中引入axios:
import axios from 'axios'
直接使用axios的全局变量来调用get方法,get中第一个参数传递url,第二个参数是相关配置,在其中可以传递params参数(参数以?形式加在url末尾),进行header的设置等。使用.then接收返回值,可以采用函数来处理返回结果res,其中res.data或者res.body是返回的数据。使用.catch捕获异常,并可以打印错误信息参数error。
axios.get('data/zodiac.json',{ params:{ id:"101" }, header:{ token:"axios" } }).then(res =>{ this.msg=res.data; }).catch(error =>{ console.log(error); })
post方法调用、回掉、异常捕获的使用与get类似。不同的是其参数分为三个,第一个是url地址,第二个是要传递的数据,第三个是传输选项配置。与get方法不同,post专门使用第二个参数进行数据传递,而不像get中将数据设置在配置选项params中。
axPost(){ axios.post('./data/test.php', //url { //发送的数据 userId:'105' }, { //option选项 headers:{ token:"axPost" } } ).then(res =>{ //接收结果 this.msg=res.data; }).catch(err=>{ //处理错误 this.msg=err; }) }
也可以直接使用http进行数据请求,直接进行url、method、data、headers、params等的设置,例如使用http发送post请求:
axios({ url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json", method:"post", data:{ userId:"106" }, headers:{ token:"axHttp" } }).then(res=>{ this.msg=res.data; })
axios也提供了在网络请求发送前与数据返回时进行拦截的函数interceptors,以便进行相关处理。例如在发送前使用request.use拦截,进行你想要的执行的操作后再将config返回出去,在请求返回时使用response.use进行拦截,操作后再将结果返回:
axios.interceptors.request.use(config =>{ console.log("axois请求"); return config; }); axios.interceptors.response.use(res =>{ console.log("axois回调"); return res; })
希望本文所述对大家vue.js程序设计有所帮助。
本文向大家介绍vue学习之Vue-Router用法实例分析,包括了vue学习之Vue-Router用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考,具体如下: Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击<router-link>它可以在<router-view
本文向大家介绍vue学习笔记之slot插槽用法实例分析,包括了vue学习笔记之slot插槽用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue slot插槽用法。分享给大家供大家参考,具体如下: 不使用插槽,在template中用v-html解析父组件传来的带有标签的content 使用插槽,如果父组件为空,就会显示slot中定义的默认内容 使用插槽添加header和foot
本文向大家介绍Axios学习笔记之使用方法教程,包括了Axios学习笔记之使用方法教程的使用技巧和注意事项,需要的朋友参考一下 前言 最近正在学习Axios,相信大家都知道Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。所以本文将详细介绍关于Axios使用方法的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: Axios Git
本文向大家介绍vue+axios实现文件下载及vue中使用axios的实例,包括了vue+axios实现文件下载及vue中使用axios的实例的使用技巧和注意事项,需要的朋友参考一下 功能:点击导出按钮,提交请求,下载excel文件; 第一步:跟后端童鞋确认交付的接口的response header设置了 以及返回了文件流。 第二步:修改axios请求的responseType为blob,以pos
本文向大家介绍学习Vue组件实例,包括了学习Vue组件实例的使用技巧和注意事项,需要的朋友参考一下 Vue实例 项目启动过程 看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)? 你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化)。
本文向大家介绍ES6学习笔记之let与const用法实例分析,包括了ES6学习笔记之let与const用法实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了ES6学习笔记之let与const用法。分享给大家供大家参考,具体如下: 在ES6中不是var,而是通过let来声明变量,用const来声明常量,有如下一些不同: 1、let与const作用域只限于当前代码块{},而var则没有这