Vue中如何使用axios，附上直接可用的简单例子

前段时间被公司里的dalao分配去写一个登陆注册的页面(基于vue)，然后页面写完了，要开始调用接口了，就需要ajax来调用接口啦.以前是习惯用vue-resource的，不过好像因为已经没人维护了，所以就转用axios吧...

axios并不像ajax或者vue-resource那样，它默认post是以Request Payload这种形式来传输的，所以第一次用的时候就被坑到了。不过网上很多解决的方法，我直接就放例子了吧...

以下例子都基于vue-cli 快速创建的那个项目

 

1.安装axios 

npm install --save axios

2. 在入口main.js中导入axios 并将axios写入vue的原型，这样就能更简单的使用。

    import axios from 'axios'
    import Qs from 'qs'
    //QS是axios库中带的，不需要我们再npm安装一个
     
    Vue.prototype.axios = axios;
    Vue.prototype.qs = Qs;

Ps:Qs这个库是帮助我们解决上面的那个坑的,建议使用...

3.在项目里愉快的使用axios啦

    this.axios.post('/api/test',this.qs.stringify({'name':'xiaoming','sex':'nan'}),{
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            })
              .then(function(res){
                console.log(res.data)
                      //控制台打印请求成功时返回的数据
                   //bind(this)可以不用
              }.bind(this))
              .catch(function(err){
                if(err.response) {
                  console.log(err.response)
                    //控制台打印错误返回的内容
                }
                    //bind(this)可以不用
              }.bind(this))

这段代码可以在vue的mounted钩子或者methos里面使用。this.axios就是上面原型那的效果啦..

'api/test'这里是你要请求的接口。

PS: api 这个我是做了反向代理的(不然的话会跨域)，所以上面的 'api/test' 其实是这样的 : http://192.168.X.XX/test. 其中api对应的就是http://192.168.X.XX，当然这个你可以自己改为 www.baidu.com 或者 http://www.zhanxiong.xyz 等等这样的都可以。
--------------------- 
作者：__zackxiong__ 
来源：CSDN 
原文：https://blog.csdn.net/qq_22046267/article/details/81322099 
版权声明：本文为博主原创文章，转载请附上博文链接！