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

更新时间：2018年04月19日 17:26:14 作者：Baby_加油_

大家在vue中，经常会用到数据请求问题，常用的有vue-resourse、axios ，今天小编给大家介绍下axios的post请求，感兴趣的朋友跟随脚本之家小编一起看看吧

在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项目打包部署全过程(history模式)
vue项目中我们比较常用的模式为hash和history模式,下面这篇文章主要给大家介绍了关于Vue项目打包部署的全过程,讲解的是vue-router中history模式的部署,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-05-05
vue如何在用户要关闭当前网页时弹出提示的实现
这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
vue中使用Axios最佳实践方式
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下
2022-09-09
vue-element-admin 菜单标签失效的解决方式
今天小编就为大家分享一篇vue-element-admin 菜单标签失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
Nginx同一端口部署多个前后端分离的vue项目完整步骤
最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目,所以就有了本文,这篇文章主要给大家介绍了关于Nginx同一端口部署多个前后端分离的vue项目的相关资料,需要的朋友可以参考下
2023-10-10
vite中使用@配置路径别名过程示例
这篇文章主要为大家介绍了vite中使用@配置路径别名过程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue.js rules校验规则举例详解
Vue表单校验规则（rules）是一种用于验证表单数据的对象,它通常用于Vue.js框架中的表单组件中,可以在表单提交前进行数据验证,这篇文章主要给大家介绍了关于Vue.js rules校验规则的相关资料,需要的朋友可以参考下
2024-02-02
使用form-create动态生成vue自定义组件和嵌套表单组件
这篇文章主要介绍了使用form-create动态生成vue自定义组件和嵌套表单组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
vue报错Not allowed to load local resource的解决办法
这篇文章主要给大家介绍了关于vue报错Not allowed to load local resource的解决办法,这个错误是因为Vue不能加载本地资源的原因,需要的朋友可以参考下
2023-07-07