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))
 }