vue 2.0中使用axios遇到问题的解决方法

简介: 在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,下面简单介绍一下axios的使用,具体用法可参考npm链接:https://www.npmjs.com/package/axios。

在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,下面简单介绍一下axios的使用,具体用法可参考npm链接https://www.npmjs.com/package/axios

特征

  • 的XMLHttpRequest从浏览器
  • HTTP从node.js的请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换为JSON数据
  • 客户端支持防止XSRF

1.安装axios


npm install axios -S
//使用淘宝源
cnpm install axios -S
//使用bower
bower install axios -S
//或者使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用。

//main.js


import axios from 'axios'
Vue.prototype.$http = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $http命令


methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}

2.axios发送post请求,如何提交表单数据?

在项目开发中,后台接口已经开发好了(对接iOS、安卓),h5开发用了vue+axios,可是用post提交结果报错,如下图:

171635_zCCa_3668566.png

170840_hl2z_3668566.png

170929_jfd3_3668566.png

后来得知后台数据接收这块需要以表单形式提交数据,而axios中post默认的提交是json数据,那么我们怎么用axios提交表单数据呢,经查阅资料动手实践就简单提供几种方法(想了解跟多可参阅下面链接):

1,简单直接有效(直接将数据拼接成字符串)


this.$http.post('/app/user/login.do',
    "username=15989346035&pwd=xxxxx&skey=skey&type=1")
    .then(function(res){
        console.log(res.data.data.token)
    })
    .catch(function(err){
        console.log(err)
    })

2,也可以实现


var params = new URLSearchParams();
    params.append('username', '15989346035');
    params.append('pwd', 'xxxxx');
    params.append('skey', 'skey');
    params.append('type', 1);
this.$http.post('/app/user/login.do',
    "username=15989346035&pwd=e10adc3949ba59abbe5") 
    .then(function(res){ 
        console.log(res.data.data.token)
     }) 
    .catch(function(err){ console.log(err) })

3,网上搜索出来比较多人使用的(不知道什么原因,我试验没有成功,大家可以尝试说不定用)


axios({
    url: '/app/user/login.do',
    method: 'post',
    data: {
        username:18943980005,
        pwd:"XXXXX",
        skey:"skey",
        type:1
    },
    transformRequest: [function (data) {
        let ret = ''
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }],
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
})

参考链接:

axios发送请求:https://www.cnblogs.com/zhouyangla/p/6753673.html

                         https://www.jianshu.com/p/df464b26ae58

axios中post提交表单数据:https://segmentfault.com/q/1010000008462977

                                          http://blog.csdn.net/wopelo/article/details/78783442

原文发布时间为:2018年01月17日
原文作者:杨鹏飞乀

本文来源:开源中国 如需转载请联系原作者







目录
相关文章
|
23天前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
23天前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
3天前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
23天前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
1月前
|
JavaScript 前端开发
vue引入axios出现Module parse failed: Unexpected token (5:2)
vue引入axios出现Module parse failed: Unexpected token (5:2) 页面显示 Cannot GET /
|
2月前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
48 1
|
2月前
|
JSON JavaScript 前端开发
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
在Vue项目中,高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁,其重要性不言而喻。本文将带您领略axios的魅力,从基本概念、安装方法,到高级应用技巧,助您快速掌握在Vue中利用axios进行HTTP请求的精髓。我们不仅会探讨axios的基础用法,如GET、POST请求,还将深入探索跨域配置、全局注册以及设置拦截器等高级功能,助您轻松实现优雅的前后端通信。
|
2月前
|
JSON 数据格式
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
|
2月前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
58 0
|
3月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法