async...await 结合 Promise通过post进行跨域的解决办法

此方法解决了jsonp跨域只能通过get方法的安全性问题以及文件大小受限问题。此方法是将传给后台的数据封装为form进行post提交.结合promise async await 解决了异步执行的问题。

第一种方法:会对特殊字符进行编译


//同步执行
const ajaxPromise =  param => {
  return new Promise((resovle, reject) => {
	  var form=new FormData();
	  		console.log(JSON.stringify(param))
	  		
	  for( var key in param.param ){
	  		console.log(key, param.param[key])
			form.append(key, param.param[key])
		}
		//form.append("uuid", "adsfhjasdfhak-asdf-asdf-")

		console.log(form)
		$.ajax({ 
	      url:param.url,
		    type: "post", 
		    data: form, 
		    contentType: false, 
		    processData: false, 
		    success: function (ret) { 
	          if(ret.success){
	          	console.log("POST成功:"+JSON.stringify(ret));
	          }else{
	          	console.log("POST失败:"+ret)
	          } 
	          resovle(ret);
		    }, 
		    error: function (ret) { 
		        console.log(ret); 
		       	var ret= {"errorcode":9999,"msg":"提交数据失败,请检查网络是否正常","success":false}
		       	reject(ret);
		    } 
		}); 
  })
}
//异步执行,不能直接使用得到返回结果
function  postdata(url,p){
  var form=new FormData();
  for( var key in p ){
		form.append(key, p[key])
	}
	//form.append("uuid", "adsfhjasdfhak-asdf-asdf-")

	$.ajax({ 
      url:svr+url,
	    type: 'POST', 
	    data: form, 
	    contentType: false, 
	    processData: false, 
	    success: function (ret) { 
          if(ret.success){
          	console.log("POST成功:"+JSON.stringify(ret));
          }else{
          	console.log("POST失败:"+ret)
          } 
          return ret;
	    }, 
	    error: function (ret) { 
	        console.log(ret); 
	       	var ret= {"errorcode":9999,"msg":"提交数据失败,请检查网络是否正常","success":false}
	       	return ret;
	    } 
	}); 
}


//使用示范
 async function ajaxp(){
	var p={
		"url":"",
		"param":{"uuid":"这是对的-asdf-asdf-"}
	}
 	//console.log(p.p.uuid,"第一次调用")
 	let res = await ajaxPromise(p)
	console.log("1",JSON.stringify(res))
	
	
 	p.param.uuid="第二次调用"
 	res = await ajaxPromise(p)
	console.log("2",JSON.stringify(res))
 	return res
 } 

//var aaa=await ajaxPromise(p)
//alert(JSON.stringify(aaa))

第二种方法:不会对特殊字符进行编译

const xhrPost =  param => {
  return new Promise((resovle, reject) => {
    var xhr = new XMLHttpRequest();
    //xhr.open(param.type || "get", svr+param.url, true);  //服务器暂不支持跨域get
    xhr.open("post", cfg.svrurl+param.url, true);
    var poststr=param.param
    if (typeof param.param == 'object'){
      try {
          if (typeof param.param == "object") {
             poststr=JSON.stringify(param.param)
          }
      } catch(e) {
      	console.log("post数据类型错误")
      	poststr=null
      }
    }
   
    xhr.send(poststr || null);

    xhr.onreadystatechange = () => {
     var DONE = 4; // readyState 4 代表已向服务器发送请求
     var OK = 200; // status 200 代表服务器返回成功
     //console.log(xhr.readyState,xhr.status,xhr.responseText)
     if(xhr.readyState === DONE){
      if(xhr.status === OK){
        resovle(JSON.parse(xhr.responseText));
      } else{
        reject(JSON.parse(xhr.responseText));
      }
     }
    }
  })
}


 async function ajaxx(){
	var p={
		"url":"/test",
		"param":'{"uuid":"!@#$%^&*()_+=-"}'
	}

 	console.log("第一次调用")
 	let res = await xhrPost(p)
	console.log("1",JSON.stringify(res))
	
	p.param.uuid="第二次调用,一段中文"
 	console.log("第二次调用")
 	res = await xhrPost(p)
	console.log("2",JSON.stringify(res))
 } 

你可能感兴趣的:(javascript)