关于vue中的ajax请求和axios包问题

在vue中，经常会用到数据请求，常用的有：vue-resourse、axios

今天我说的是axios的post请求

github源文件及文档地址：【https://github.com/axios/axios】

+ 首先，引入axios

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入：import axios from 'axios';

•get请求

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

•post请求

 依赖于qs包，将对象转换成以&连接的字符串
//例：
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})

附录：配置 axios

上面封装的方法中，使用了 axios 的三个配置项，实际上只有 url 是必须的，完整的 api 可以参考使用说明

为了方便，axios 还为每种方法起了别名，比如上面的 saveForm 方法等价于：

axios.post('/user', context.state.test02)

完整的请求还应当包括 .then 和 .catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})

当请求成功时，会执行 .then，否则执行 .catch

这两个回调函数都有各自独立的作用域，如果直接在里面访问 this，无法访问到 Vue 实例

这时只要添加一个 .bind(this) 就能解决这个问题

.then(function(res){
 console.log(this.data)
}.bind(this))

总结

以上所述是小编给大家介绍的关于vue中的ajax请求和axios包问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue axios 在页面切换时中断请求方法 ajax
  • 在Vue组件化中利用axios处理ajax请求的使用方法
  • vue使用Axios做ajax请求详解
  • VUE 更好的 ajax 上传处理 axios.js实现代码
赞 (0)

相关推荐

  • vue使用Axios做ajax请求详解

    vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在要使用的文件中引入axios import axios from 'axios' 3. 使用axios做请求 可以通过向 axios 传递相关配置来创建请求, 只有 url 是必需的.如果没有指定 method,请求将默认使用 get 方法. { // `url` 是用于请求的服务器 URL url

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • VUE 更好的 ajax 上传处理 axios.js实现代码

    vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios模块之后 import axios from 'axios'; //安装方法 npm install axios //或 bower install axios 当然也可以用script引入 <script src="https://unpkg.com/axios/dist/axios.min

  • vue axios 在页面切换时中断请求方法 ajax

    如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C

  • 关于vue中的ajax请求和axios包问题

    在vue中,经常会用到数据请求,常用的有:vue-resourse.axios 今天我说的是axios的post请求 github源文件及文档地址:[https://github.com/axios/axios] + 首先,引入axios CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import a

  • 第一次在Vue中完整使用AJAX请求和axios.js的实战记录

    目录 零.AJAX 0.0 npm install express 0.1 express.js 0.2 GET-HTML 0.3 POST-HTML 一.导入模块 1.1方法一.下载axios.js,并放入vue工程plugins目录下 1.2方法二使用包管理器安装axios 1.3方法三直接引入CDN 二.实际应用 2.1以为和风天气API实践: 2.2数据接口如下: 2.3实现: 2.4完整Vue: 三.BUG修复 3.1 Can‘t resolve ‘axios‘ in ‘C:\vue\

  • 原生js实现ajax请求和JSONP跨域请求操作示例

    本文实例讲述了原生js实现ajax请求和JSONP跨域请求.分享给大家供大家参考,具体如下: 直接上代码: const ajax = (params = {}) => { const nowJson = params.jsonp ? jsonp(params) : json(params); function jsonp(params){ //创建script标签并加入到页面中 var callbackName = params.jsonp; var head = document.getEle

  • Ajax请求和Filter配合案例解析

    案例引入 现在有这样一个问题,就是在提交大片文字评论的时候,前台拿到数据之后给后台发送ajax请求,然后后台有一个防止SQL注入的Filter,这个Filter得到这个前台传过来的数据之后,进行合法性校验,如果没有校验成功,那么要跳转到error.jsp页面进行显示错误信息.现在让我们看看怎么实现这个需求. 思路一:请求转发实现 ajax请求 $.ajax({ method:'post', url:'servlet/DemoServlet', dataType:'json', data:{ 'u

  • 详解JavaScript原生封装ajax请求和Jquery中的ajax请求

    前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),当然也可同步,这样就可使网页从服务器请求少量的信息,而不是整个页面.Ajax使我们的项目更小.更快,更友好,在前端开发有很高的地位,也是面试题的热点.本次测试是在localhost本地环境. 1.原生ajax (1)html前端代码get请求方式创建一个ajax实例xhr

  • Vue中的计算属性和axios基本使用回顾

    目录 1. 什么是计算属性 2. 计算属性的特点 计算属性 3. 如何声明计算属性 4. 计算属性的使用注意点 5. 计算属性 vs 方法 6. axios axios的基本使用 总结 1. 什么是计算属性 计算属性本质上就是一个function 函数,它可以实时监听data 中数据的变化,并 return 一个计算后的新值,  供组件渲染 DOM 时使用. 计算属性指的是通过一系列运算之后,最终得到一个属性值. 这个动态计算出来的属性值可以被模板结构或methods 方法使用. 示例代码如下:

  • 详解vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se

  • 详解axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 二.引入方式: npm: $ npm install axios //淘宝源 $ cnpm install axios bower: $ bowe

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • 浅谈ajax在jquery中的请求和servlet中的响应

    在jsp中,首先,你需要导入jquery的架包: 获取可返回站点的根路径: <% String path = request.getContextPath(); %> 在jquery中写ajax请求: <script type="text/javascript"> $(function(){ $(".B").click(function(){ $.ajax({ type: "GET", //对应servlet中的方法 ur

随机推荐