一、前后端交互模式

1.接口調(diào)用方式:

原生ajax,

基于jQuery的Ajax

fetch

axios

2.URL地址格式

①傳統(tǒng)形式的url

格式:

Schema://host:port/path?query#fragent

Schema-協(xié)議，http,https,ftp等

host-域名或ip地址

port-端口，http默認(rèn)端口是80，可以省略

path-路徑

query-查詢參數(shù)，例uname=li

frament-錨點，hash,用于定位頁面的某個位置

②Restful形式的URL

HTTP請求方式

GET 查詢

POST 添加

PUT? 修改

DELETE? 刪除

符合規(guī)則的url地址

http://www.hello.com/books? GET

http://www.hello.com/books? POST

http://www.hello.com/BOOKS/123? PUT

http://www.hello.com/BOOKS/123? DELETE

二、Promise用法

1.異步調(diào)用

異步效果分析:

定時任務(wù)

Ajax

事件函數(shù)

多次異步調(diào)用的依賴分析，多次異步調(diào)用的結(jié)果順序不確定，異步調(diào)用結(jié)果如果存在依賴需要嵌套

2.Promise概述

Promise是異步編程的一種解決方案，從語法上講promise是一個對象，從它可以獲取異步操作的消息，好處:可以避免多層異步調(diào)用嵌套問題

Promise對象提供了簡潔的API，使得控制異步操作更加容易。

三、接口調(diào)用-fetch用法

1.fetch概述

基本特性，更加簡單的數(shù)據(jù)獲取方式，功能更強(qiáng)大，更靈活，可以看做是xhr的升級版。

基于Promise實現(xiàn)。

語法:

fetch(url).then(fn2)

? ? ? ? ? .then(fn3)

? ? ? ? ? .then(fn)

? ? ? ? ? ....

? ? ? ? ? .catch(fn)

2.fetch基本用法

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

? ? ? return data.text();//text()屬于fetch API的一部分，返回值是一個Promise實例對象，用于獲取后臺返回的數(shù)據(jù)

? ? ? }).then(ret => {

? ? ? //注意這里是得到的最終的數(shù)據(jù)

? ? ? ? ? console.log(ret)

})

示例

fetch('http://localhost:3000/fdata').then(function (data){

? ? ? return data.text();

}).then(function(data){

? ? console.log(data);

})

3.fetch請求參數(shù)

①常用配置選項

method(String):http請求默認(rèn)方法，默認(rèn)為GET(GET,POST,PUT,DELETE)

body(String):http的請求參數(shù)

headers(Object):http的請求頭，默認(rèn)為 {}

fetch('/abc',{

? ? method: 'get'

}).then(data => {

? ? return data.text();

}).then(ret => {

? //注意這里得到的才是最終的數(shù)據(jù)

? ? console.log(ret);

});

②GET請求方式的傳遞參數(shù)

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

? ? return data.text();

}).then(ret =>{

//注意這里得到的才是最終的數(shù)據(jù)

? ? console.log(ret);

});

fetch('/abc/123',{

? ? method: 'get'

}).then(data => {

? ? return data.text();

}).then(ret => {

? //注意這里得到的才是最終的數(shù)據(jù)

? ? console.log(ret);

});

③DELETE請求方式傳遞參數(shù)

fetch('/abc/123',{

? ? method: 'delete'

}).then(data => {

? ? return data.text();

}).then(ret => {

? //注意這里得到的才是最終的數(shù)據(jù)

? ? console.log(ret);

});

④POST請求方式的傳遞參數(shù)

fetch('/books',{

? ? method: 'post',

? ? body:'uname=lisi&pwd=123',

? ? headers: {

? ? ? 'Content-Type': 'application/x-www-form-urllencoded',

}

}).then(data => {

? ? return data.text();

}).then(ret => {

? ? console.log(ret);

});

⑤PUT請求方式傳遞參數(shù)

fetch('/books/123',{

? ? method: 'put',

? ? body: JSON.stringify({

? ? ? uname:'lisi',

? ? ? age:12

? ? })

? ? headers: {

? ? ? 'Content-Type': 'applicatio/json',

}

}).then(data => {

? ? return data.text();

}).then(ret => {

? ? console.log(ret);

});

4.fetch響應(yīng)結(jié)果

響應(yīng)數(shù)據(jù)格式

text()? 將返回體處理成字符串類型

json()? 返回結(jié)果和JSON.parse(responeseText)一樣。

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

? ? return data.json();

}).then(ret =>{

? ? console.log(ret);

});

四、接口調(diào)用-axios用法

axios是用于調(diào)用后臺接口的js庫

1.axios的基本特性

axios是一個基于Promise用于瀏覽器和node.js的http客戶端。官網(wǎng)https://github.com/axis/axios

具有以下特性

支持瀏覽器和node.js

支持promise

能攔截請求和響應(yīng)

自動轉(zhuǎn)換JSON數(shù)據(jù)

2.axios的基本用法

先引入axios.js

axios.get('/adata')

? ? .then(ret => {

? ? //data屬性名稱是固定的，用于獲取后臺響應(yīng)的數(shù)據(jù)

? ? console.log(ret.data);

})

3.axios常用API

get? 查詢數(shù)據(jù)

post? 添加數(shù)據(jù)

put? 修改數(shù)據(jù)

delete? 刪除數(shù)據(jù)

4.axios的參數(shù)傳遞

① GET傳遞參數(shù)

通過url傳遞參數(shù)

通過params選項傳遞參數(shù)

app.get('/axios',(req,res) =>{

? ? res.send('axios get 傳遞參數(shù)'+req.query.id)

})

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

? ? ? .then(ret=>{

? ? ? ? ? console.log(ret.data)

? ? ? })

app.get('/axios/:id',(req,res) =>{

? ? res.send('axios get (Restful) 傳遞參數(shù)'+req.params.id)

})

axios.get('/axios/123')

? ? ? .then(ret=>{

? ? ? ? ? console.log(ret.data)

? ? ? })

通過params選項傳遞參數(shù)-比較方便

app.get('/axios',(req,res) =>{

? ? res.send('axios get 傳遞參數(shù)'+req.query.id)

})

axios.get('/axios',{

? ? params : {

? ? ? id :123

? ? }

? })

? ? .then(ret=>{

? ? console.log(ret.data)

})

②DELETE傳遞參數(shù)-與GET傳參類似

app.delete('/axios',(req,res) =>{

? ? res.send('axios delete 傳遞參數(shù)'+req.query.id)

})

axios.delete('/axios?id=123')

? ? ? .then(ret=>{

? ? ? ? ? console.log(ret.data)

? ? ? })

app.delete('/axios/:id',(req,res) =>{

? ? res.send('axios delete(Restful)傳遞參數(shù)'+req.params.id)

})

axios.delete('/axios/123')

? ? ? .then(ret=>{

? ? ? ? ? console.log(ret.data)

? ? ? })

通過params選項傳遞參數(shù)-比較方便

app.delete('/axios',(req,res) =>{

? ? res.send('axios delete 傳遞參數(shù)'+req.query.id)

})

axios.delete('/axios',{

? ? params : {

? ? ? id :123

? ? }

? })

? ? .then(ret=>{

? ? console.log(ret.data)

})

③POST傳遞參數(shù)

通過選項傳遞參數(shù)(默認(rèn)傳遞的是json格式的數(shù)據(jù))

app.post('/axios',(req,res)=>{

? res.send('axios post 傳遞參數(shù)'+ req.body.name)

})

axios.post('/axios',{

? ? uname:'tom',

? ? pwd:123

}).then(ret => {

? ? console.log(ret.data)

})

通過URLSearchParams傳遞參數(shù)(application/x-www-form-urllencoded)

const params = new URLSearchParams();

params.append('uname', 'zhngsan');

params.append('pwd', '123');

axios.post('/axios',params).then(ret =>{

? ? console.log(ret.data)

})

④PUT傳遞參數(shù)

參數(shù)傳遞方式與POST類似

app.put('/axios:id',(req,res)=>{

? res.send('axios put 傳遞參數(shù)'+ req.params.id+req.body.name)

})

axios.put('/axios/123',{

? ? uname:'tom',

? ? pwd:123

}).then(ret => {

? ? console.log(ret.data)

})

通過URLSearchParams傳遞參數(shù)(application/x-www-form-urllencoded)

const params = new URLSearchParams();

params.append('uname', 'zhngsan');

params.append('pwd', '123');

axios.put('/axios',params).then(ret =>{

? ? console.log(ret.data)

})

5.axios的響應(yīng)結(jié)果

響應(yīng)結(jié)果的主要屬性

data:實際響應(yīng)回來的數(shù)據(jù)

headers:響應(yīng)頭信息

status:響應(yīng)狀態(tài)碼

statusText:響應(yīng)狀態(tài)信息

axios.post('/axios-json').then(ret=>{

console.log(ret)

})

6.axios的全局配置

axios.defaults.timeout = 3000; //超時時間

axios.defaults.baseURL = 'http://localhost:3000/app'; //默認(rèn)地址，配置信息基準(zhǔn)地址

axios.defaults.headers[ 'mytoken' ] = aqwerwqwerqwer2ewrwe23eresdf23' //設(shè)置請求頭

7.axios攔截器

①請求攔截器

在請求發(fā)出之前設(shè)置一些信息

axios? 請求攔截器? ? --->服務(wù)器

添加一個請求攔截器

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

? ? config.headers.mytoken='nihao';

? //在請求發(fā)出之前進(jìn)行一些信息設(shè)置

? return config;

},function(err) {

? //處理響應(yīng)的錯誤信息

});

axios.get('http://localhost:3000/adata').then(function(data){

? console.log(data);

})

②響應(yīng)攔截器

在獲取數(shù)據(jù)之前對數(shù)據(jù)做一些加工處理

axios 響應(yīng)攔截器 <----服務(wù)器

添加一個響應(yīng)攔截器

axios.interceptors.response.use(function(res){

? //在這里對返回的數(shù)據(jù)進(jìn)行處理

? var data = res.data;

? return data;

},function(err) {

? //處理響應(yīng)的錯誤信息

});

axios.get('http://localhost:3000/adata').then(function(data){

? console.log(data);

})

五、接口調(diào)用-async/await用法

1.async/await基本用法

async/await是ES7引入的新語法，可以更加方便的進(jìn)行異步操作

async關(guān)鍵字用于函數(shù)上(async函數(shù)的返回值是Promise實例對象)

await關(guān)鍵字用于await函數(shù)中(await可以得到異步的結(jié)果)

async function queryData(id) {

? ? const ret = await axios.get('/data/');

? ? return ret;

}

queryData.then(ret=>{

? ? console.log(ret);

})

2.async/await處理多個異步請求

多個異步請求的場景

async function queryData(id) {

? ? const info = await axios.get('/async1');

? ? const ret = await axios.get('/async2?info='+info.data);

? ? return ret;

}

queryData.then(ret=>{

? ? console.log(ret)

})