vue与后端交互的方法

Posted 2020-12-19

一、前後端交互模式
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)
})