vue axios 数据请求实现

1.安装nginx

npm install axios --save-dev

cnpm install axios --save-dev

使用淘宝镜像

保存依赖文件到本地

装好了。packjson.js包管理里面会有

2.包管理的所有依赖都可以直接在代码里面import

<script>
import axios from 'axios';

3.请求实现

created(){
       axios({
                method:'get',
                url:'http://localhost/******你自己的请求路径'
            }).then(function(){
                console.log('sssss');
            });
  },

4.查看数据

5.后台没有对post和get做判断if单一返货数据的处理，前端是可以随便写post或者get请求的。

6.就可以实现了，我这是瞎写的。实际项目请求的时候，axios肯定是走的统一暴露出来的方法，不是这样写的，不然无法统一管理。

axios是基于es6的promise方法的

jquery里面的ajax其实是封装的,利用new XMLHttpRequest(),js的，浏览器内嵌方法。和 new Array()差不多。Http协议请求

var Ajax = {
    get: function(url,fn){
        // XMLHttpRequest对象用于在后台与服务器交换数据
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    // data应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
    post: function(url,data,fn){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    // console.log(xhr.responseText);
                    fn.call(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}