ajax success调用vue方法,vue与后端交互的方法

一、前後端交互模式

1、Promise用戶

2、接口調用-fetch

3、接口調用-axios

4、接口調用-async/await

5、基於接口案例

二、接口調用方式

1、原生Ajax

2、基於jQuery的Ajax

3、fetch

4、axios

三、Resful形式的 URL

http請求方式

1、GET 查詢

2、POST 添加

3、PUT 修改

4、DELETE 刪除

四、異步調用

1、異步效果分析

2、ajax

例如

$.ajax({

url:"",

success:function(){

}

})

3、Promise是一種解決異步編程的方案，也是一個對象，它可以從異步獲取消息

優點：

(1)、可以避免異步調用嵌套的問題

(2)、Promise對象的簡潔的API，使得控制異步的更加容易

4、Primiose 的使用

var p = new Primose((resolve,reject)=>{

成功調用 resolve

失敗調用 reject

})

p.then(

(success)=>{

},

(error)=>{

}

)

5、基於Promise處理Ajax請求

2.1原生js

function getDate( apiUrl){

return new Primose( function( resolve ,reject ){

var xhr = new XMLHttpRequest()

xhr.onreadStatechange = function (){

if( xhr.readyState != 4) return

if( xhr.readyState == 200 && xhr.readyState == 4) {

resolve( xhr.response )

}else{

reject( "出錯" )

}

}

xhr.open( "get",apiUrl)

xhr.send( null )

})

}

//調用

getDate( http://api/post)

.then( success=>{}, (error)=>{} )

2、發送多次ajax請求

通過鏈式調用

第一個請求

getData( 'http'//1 )

.then( data=>{

console.log( data)

return getData( 'http:///')

})

.then( data1=>{

console.log(data1);

return getData(data1)

})

.then( data2=>{

console.log( data2 )

})

五、Then參數的函數返回值

1、返回Priomse對象

六、Promise常用的Api

var p= new Proimse()

1、實例方法

p.then()

p.catch()

p.finally()(無論如何都會觸發的方法)

2、對象方法

Primose.all()并法處理多個異步任務,所有任務都完成才能得到結果

例如

Priomise.all([p1,p2,p3]).then( res=>{} ) 例如

每一個p1,p2,p3都是異步對象

var p1=getDate('http://api1');

var p2=getDate('http://api1');

var p3=getDate('http://api1');

Priomse.all([p1,p2,p3]).then( res=>{ console.log( res ) })

Primose.race()并發處理多個異步任務,只要有個任務完成的就能得到結果

Primose.race([p1,p2,p3]).then( res=>{ })

七、接口fetch使用

1、更加簡單的數據獲取方式，功能更加強大，更加靈活，可以看做的是xhr

例如

fetch('/abc).then( data=>{

return data.text()//返回的是Priomse()對象

}).then( ret=>{

console.log( ret)//最終得到數據

})

2、fecth參數請求

常用配置選項

(1)、method：方法默認(GET,PUT,POST,DELETE)

(2)、bodyhttP請求參數

(3)、header(Object)請求頭默認

fetch('/abc',{ method:get }).then( res=>{

res.text()

}).then( result=>{

console.log( result)

})