【Vue_03】前后端交互

<script>
	var p = new Pormise(function(resolve, reject) {
	     // 这里实现异步调用
	
	     // 调用成功
	     resolve("success");
	
	     // 调用失败
	     reject("error");
	 });
	
	 p.then(function(data) {
	     // 成功的情况
	 },function(info) {
	     // 失败的情况
	 });
</script>   

<script>
    function request(url) {
        // 创建一个 Promise 实例
        var p = new Pormise(function(resolve, reject) {
            // 获取与后台交换数据的对象 XMLHttpRequest
            var xhr = new XMLHttpRequest();

            /* 
                - readyState 改变时触发 onreadystatechange 事件
                - readyState： XMLHttp 请求的当前状态
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪
                - status：响应状态码
                    200: "OK"
                    404: 未找到页面
            */
            xhr.onreadystatechange =  function() {
                if(xhr.readyState != 4) {
                    return ;
                }
                
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 请求成功的情况，通过 responseText 属性来获取由服务器返回的数据
                    resolve(xhr.responseText);
                } else {
                    // 处理请求失败
                    reject("请求失败");
                }
            }
            
            /* 
                初始化一个请求
                open(method, url, async, username, password)
                    method: 请求方式
                    url: 请求的地址
                    async: 请求是否异步，默认异步
                    userrname、password: 可选，为 url 的授权提供认证
            */
            xhr.open("get", url);

            /* 
                发送 http 请求
                send(参数可选)
                    null: 代表只有 url 没有数据体。例如：get 请求
                    数据体：除了请求头信息还包含具体数据的数据体。例如：post请求
            */
            xhr.send(null);
        });

        // 返会 Promise 实例
        return p;
    }

    // 请求数据
    request("http://localhost/first/data").then(
        function(data) {    // 参数1：处理请求成功的方法
            console.log(data);
        },function(info) {  // 参数2：处理请求失败的方法，可以省略
            console.log(info);
        }
    );
</script>      

<script>
	// fetch的参数为请求的路径，默认为 get 请求
    fetch("url")
    .then(
    	function(data) {  // 成功返回的 data 是一个 Promise 实例，不能直接拿到数据
    		// 需要使用 fetch 的方法 text() 取出数据
    		data.text();
    	},function(info) { // 失败返回的 info 我们可以直接拿到数据
    	}
    );
</script>

<script>
	// 配置公共的请求头
    axios.defaults.baseURL="http://localhost/test";

    async function request() {
        // 添加 await 之后，当前 await 返回结果之后才会执行下面的代码
        var info = await.get("data1");
        var ret = await axios.get("data2?info=" + info.data);
        return ret.data;
    }

    request().then(function(data){
        console.log(data);
    });
</script>