Vue前端互動

2021-10-02 06:49:13 字數 3108 閱讀 7441

前言

1、介面呼叫方式

2、url位址格式

restful形式的url

3、promise 概述

4、promise 的基本用法

例項化promise 物件,建構函式中傳遞函式,該函式中用於處理非同步任務

resolve和reject兩個引數用於處理成功和失敗兩種情況,並通過p.then獲取處理結果

var p=new promise (function(resolve,reject));

p.then(function(ret)

,function(ret)

);

5、基於promise 處理ajax請求

1.處理原生ajax

function querydata()

else

} xhr.open

('get','/data');

xhr.send

(null);}

)}

2.傳送多次ajax請求

querydata()

.then(function(data)

) .then(function(data)

) .then(function(data)

);

6、then引數中的函式返回值

1.返回promise 例項物件

2.返回普通值

7、promise 常用的api

1.例項方法

querydata()

.then(function(data)

) .catch(function(data)

) .finally(function()

);

2.物件方法

promise.all([p1,p2,p3]).then((resule)=>

)promise .race([p1,p2,p3]).then((result)=>

)

8、介面呼叫-fatch用法

fetch概述

1.基本特性

2.語法結構

fetch

(url).then

(fn2)

.then

(fn3)

....catch

(fn)

3.fetch的基本用法

fetch

('/abc'

).then

(data=>

return data.text()

;}).then(ret=>

);

4.fetch請求引數

1.get請求方式的引數傳遞

fetch('/abc?id=123').then(data=>

).then

(ret=>)

//注意這裡得到的才是最終的資料

console.log

(ret);}

);

fetch('/abc/123',

).then(data=>

).then(ret=>)

);

2.delete請求方式的引數傳遞

fetch('/abc/123',

).then(data=>

).then(ret=>

);

3.post請求方式的引數傳遞

fetch('/books',

}).then(data=>

).then(ret=>

);

4.put請求方式的引數傳遞

fetch('bools/123',

) headers:

}).then(data=>

).then(ret=>

);

5.fetch相應結果

響應資料格式

fetch('/abc'then(data=>

).then(ret=>

);

9、axios的基本特性

1.axios是乙個基於promise用於瀏覽器和node.js的http客戶端

axios.get('/adata')

.then(ret=>

)

2.axios的引數傳遞

1.get傳遞引數

axios.get('/adata?id=123')

.then(ret=>

)axios.get('/adata/123')

.then(ret=>

)axios.get('/adata',})

.then(ret=>

)

2.post傳遞引數

axios.post('/adata',

).then(ret=>

)

3.put傳遞引數

axios.put('/adata/123',

).then(ret=>

)

3.介面呼叫-axios用法

4.axios***

1.請求攔截資訊

在請求發出之前設定一些資訊

//新增乙個請求資訊

axios.interceptors.request.use(function(config))

,function(err)

);

10、介面呼叫-async/await用法

基本用法

async function querydata(id)

querydata.then(ret=>

)

前端資料互動

資料互動 1.http協議 2.form 3.ajax 不能跨域,官方 單向 4.jsonp 跨域 不推薦 不支援post 5.websocket 雙向 http協議 協議 1.無狀態 客戶端訪問伺服器之後,伺服器不能記住客戶端 2.連線過程 客戶端傳送請求到伺服器,伺服器返回資料 3.x訊息包含 ...

vue前端 vue前端解決方案

vue常用的元件庫有element ui iview antd等。而這幾個元件庫都有基於vue.js的前端解決方案,專案時間緊或初學者直接上手使用可以免去一開始搭建環境和寫基礎 的麻煩。1.ant design pro of vue 開箱即用的中颱前端 設計解決方案 ant design pro o...

前端後端互動的方法

前端後端互動的方法 前端給後端 1.form通過name來傳送 所有value的值到 form的action屬性的方法中 formid myform name myform method post onsubmit return sumbittest action registeraction.ac...