vuejs

Axios的用法

日期:2017-02-24 阅读:2534


进入网易云课堂播放
    |    更多视频教程>

官方文档  https://github.com/axios/axios

axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用

--------------------------

跨域问题:

 No 'Access-Control-Allow-Origin' header is present on the requested resource   -- 表示前端要跨域
 Uncaught (in promise)   -- 表示服务器端跨域

 

  需要在php服务器端的php文件设置: 
header("Access-Control-Allow-Origin:*");
header("Content-type:application/json;charset=utf-8");//字符编码设置 
=============================

 

http://www.cnblogs.com/Upton/p/6180512.html
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.js"></script>

------------------------------

import axios from 'axios';
axios.post(url,{
    name:'0',age:''
    },{emulateJSON: true}, {  // 这里是跨域写法
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}  // 这里是跨域的写法
    }).then(reponse=>{
     console.log(reponse)
      this.tableData=reponse.data.data
    })
http://www.php.cn/js-tutorial-400663.html  
---------------------
.vue文件
<script>
 
export default {
  name: 'home',  
   data(){
        return{
        url:'http://127.0.0.2:8080/demo/drupal/drupalsite/drupal-vue/api/restful',
        nodes:[]
        }
    },
  components: {
     
  },
  created:function (){
 
        axios.get(this.url,
         {  // 这里是跨域写法
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}  // 这里是跨域的写法
    })
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
 
  }
}
</script>
 
-------------------------

 

 

<<点击返回