Vue太难啦！从入门到放弃day05——Vue前后端交互

最新推荐文章于 2024-03-18 02:15:37 发布

小陈工

最新推荐文章于 2024-03-18 02:15:37 发布

阅读量1.4k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端前端框架开发语言

本文链接：https://blog.csdn.net/qq_40652101/article/details/126247795

版权

本文详细介绍了Vue.js中实现前后端交互的方法，包括Promise的基本概念和使用，fetch API的应用，axios库的集成以及如何利用async/await进行异步操作。内容涵盖Promise的实例方法和对象方法，fetch的参数传递和响应获取，axios的全局配置和拦截器，以及async/await处理多个异步请求的技巧。

摘要由CSDN通过智能技术生成

前言

一、Vue前后端交互——Promise

1.1 Promise概述

    Promise主要解决异步深层嵌套的问题 
    Promise 提供了简洁的API，使得异步操作更加容易
    从语法上讲，Promise是一个对象，也是一个函数

1.2 Promise基本使用

我们使用new来构建一个Promise，并且传入两个参数： resolve，reject
分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数：
var p = new Promise(function(resolve, reject){
   
	// 这里用于实现异步任务
	setTimeout(function(){
   
		var flag = false;
		if(flag) {
   
			// 正常情况
			resolve('hello');
		}else{
   
			// 异常情况
			reject('出错了');
		}
	}, 100);
});

Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数：
p.then(function(data){
   
	console.log(data)
},function(info){
   
	console.log(info)
});

1.3 基于Promise发送Ajax请求

function queryData(url) {
   
	// 创建一个Promise实例
	var p = new Promise(function(resolve, reject){
   
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
   
			if(xhr.readyState != 4) return;
			if(xhr.readyState == 4 && xhr.status == 200) {
   
				# 处理正常的情况
				resolve(xhr.responseText);
			}else{
   
				# 处理异常情况
				reject('服务器错误');
    		}
		};
		xhr.open('get', url);
		xhr.send(null);
	});
	return p;
}

// 注意： 这里需要开启一个服务
// 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
queryData('http://localhost:3000/data')
.