Vue.js利用Promise封装ajax请求动态获取数据并展示

关键词：export用来暴露向外界透露的模块 import用来引入模块

Vue.js动态绑定数据就是在data:{}中写入你要绑定的参数
在Html标签中利用{{}}传入要在页面显示的数据，下面是Promise封装Ajax请求的代码：

//暴露AjX请求方法
export function ExportAjax(reqMethod,reqURL){
/*
* ExportAjax()方法中需要传入两个参数
* 参数一：reqMethod请求的方式 一般用GET或者POST
* 参数二：reqURL请求的路径
/
//使用promise封装ajax请求
//新建一个Promise对象pro
let pro = new Promise((resolve,reject)=>{
/
* Promise中的参数
* resolev：请求成功所执行的方法
* reject：请求失败所执行的方法
/
//创建xhr对象
const xhr = new XMLHttpRequest();
//初始化并传入两个参数1.请求方式，2.请求路径
xhr.open(reqMethod,reqURL);
//发送请求
xhr.send();
//绑定事件处理
xhr.onreadystatechange = function(){
/
* readyState：状态码(5个值)
* 0表示未初始化但是已创建XHR实例对象
* 1表示调用了open()函数
* 2表示已经调用了send()函数,但是未收到服务器响应
* 3表示正在接受服务器返回的数据
* 4表示完成响应
/
if(xhr.readyState===4){
//请求成功时
/
* status请求状态
* 介于100-200(不含200)表示信息提示
* 介于200-300(不包含300)之间表示请求成功
* 介于300-400(不含400)表示重定向
* 介于400-500(不含500)表示请求出现语法错误(前端请求数据时出错)
* 500系列错误表示服务器错误(后端错误)
*/
if(xhr.status>=200 && xhr.status<300){
//请求成功时用resolve方法将请求到的数据发送
resolve(xhr.response);
}else{
//请求失败时发送失败时所处状态
reject(xhr.status);
}
}
}
});
//返回Promise实例对象方便在导入模块式引用此对象
return pro;
}