Vue(3)

前后端交互

前后端交互模式
Promise用法
接口調(diào)用-fetch用法
接口調(diào)用-async/await用法
接口調(diào)用-async/await用法

接口調(diào)用方式

原生Ajax
基于jQuery的Ajax
fetch
axios

URL地址格式

傳統(tǒng)形式的URL
- 格式：schema://host:port/path?query#fragment
  1. schema：協(xié)議干厚。例如http萝映、https沙兰、ftp等
  2. host：域名或者IP地址
  3. port：端口茫陆。http默認端口80，可以省略
  4. path：路徑。例如/abc/a/b/c
  5. query：查詢參數(shù)。例如uname=zhangsan&age=12
  6. fragment：錨點(哈希Hash),用于定位頁面的某個位置
Restful形式的URL
- http請求方式
  1. GET：查詢
  2. POST：添加
  3. PUT：修改
  4. DELETE：刪除

Promise用法

異步調(diào)用
- 異步效果分析
  - 定時任務
  - Ajax
  - 事件函數(shù)
- 多次異步調(diào)用的依賴分析
  - 多次異步調(diào)用的結果順序不確定
  - 異步調(diào)用的結果如果存在依賴需要嵌套
```
// 回調(diào)地獄琅捏，代碼結構太復雜，想象一下就好
```

Promise概述：Promise是異步編程的一種解決方案递雀，從語法上將：從它可以獲取異步操作的消息

使用Promise主要有以下好處

可以避免多層異步調(diào)用嵌套問題(回調(diào)地獄)

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

實例化Promise對象，構造函數(shù)中傳遞函數(shù)映之，該函數(shù)用于處理異步任務

resolve和reject兩個參數(shù)用于處理成功和失敗兩種情況拦焚，并通過p.then獲取處理結果

var p = new Promise(function(resolve, rejected) {
    // 成功時調(diào)用  resolve()
    // 失敗時調(diào)用  rejected()
});
p.then(function(ret){
    // 從resolve得到正常結果
}, function(ret){
    // 從rejected得到錯誤信息
})

基于Promise處理Ajax請求

// 處理原生Ajax
function queryData(){
    var p = new Promise(function(resolve, rejected){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState!=4) return;
            if(xhr.readyState===4&&xhr.status===200){
                // 處理正常情況
                resolve(xhr.responseText);
            }else{
                // 處理異常情況
                reject('服務器錯誤');
            }
        };
        xhr.open('get',url);
        xhr.send(null);
    });
    return p;
}

發(fā)送多次Ajax請求,并且保證順序

queryData()
    .then(function(data){
        return queryData();
    })
    .then(function(data){
        return queryData();
    })
    .then(function(data){
        return queryData();
    });

then參數(shù)中的函數(shù)返回值
1. 返回Promise實例對象
  - 返回的該實例對象會調(diào)用下一個then
2. 返回普通值
  - 返回的普通值會直接傳遞給下一個then,通過then參數(shù)中函數(shù)的參數(shù)接收該值

Promise常用的API

實例方法

p.then() 得到異步任務的正確結果
p.catch() 獲取異常信息
p.finally() 成功與否都會執(zhí)行(尚且不是正式標準)

queryData()
    .then(function(data){
        console.log(data);
    })
    .catch(function(data){
        console.log(data);
    })
    .finally(function(){
        console.log('finished');
    });

對象方法
- Promise.all() 并發(fā)處理多個異步任務，所有的任務都執(zhí)行完成才能得到結果
- Promise.race() 并發(fā)處理多個異步任務杠输，只要有一個任務完成就能得到結果
```
Promise.all([p1,p2,p3]).then((result) => {
    console.log(result);
});
Promise.race([p1,p2,p3]).then((result) => {
    console.log(result);
})
```

接口調(diào)用-fetch

基本特性：
- 更加簡單的數(shù)據(jù)獲取方式赎败，功能更強大，更靈活蠢甲，可以看作xhr的升級版
- 基于Promise實現(xiàn)

語法結構

fetch(url).then(f2)
          .then(f3)
          ...
          .catch(fn)

fetch的基本語法

fetch('/abc').then(data => {
    return data.text();
}).then(ret=>{
    // 這里得到的才是最終的數(shù)據(jù)
    console.log(ret);
})

fetch 請求參數(shù)

常用配置項
- method(String):HTTP請求方法僵刮，默認為GET(GET、POST鹦牛、PUT搞糕、DELETE)
- body(String):HTTP的請求參數(shù)
- headers(Object):HTTP請求頭，默認為{}
```
fetch('/abc', {
    method: 'get'
}).then(data=>{
    return data.text();
}).then(ret=>{
    // 這里才是最終得到的數(shù)據(jù)
    console.log(ret);
})
```

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

  ```javascript
  fetch('/abc?id=123').then(data=>{
      return data.text();
  }).then(ret=>{
  // 這里才是最終得到的數(shù)據(jù)
  console.log(ret);
  })
  ```

  ```javascript
  fetch('/abc', {
      method: 'get'
  }).then(data=>{
      return data.text();
  }).then(ret=>{
      // 這里才是最終得到的數(shù)據(jù)
      console.log(ret);
  })
  ```

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

fetch('/abc', {
    method: 'delete'
}).then(data=>{
    return data.text();
}).then(ret=>{
    // 這里才是最終得到的數(shù)據(jù)
    console.log(ret);
})

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

fetch('/books', {
    method: 'post',
    body: 'uname=zhangsan&pwd=123',
    headers: {
        'Content-Type': 'application/json'
    }
}).then(data=>{
    return data.text();
}).then(ret=>{
    console.log(ret);
});

fetch('/books', {
    method: 'post',
    body: JSON.stringify({
        uname: 'zhangsan',
        age: 12
    }),
    headers: {
        'Content-Type': 'application/json'
    }
}).then(data=>{
    return data.text();
}).then(ret=>{
    console.log(ret);
});

PUT請求參數(shù)的傳遞

fetch('/books', {
    method: 'put',
    body: JSON.stringify({
        uname: 'zhangsan',
        age: 12
    }),
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then(data=>{
    return data.text();
}).then(ret=>{
    console.log(ret);
});

fetch 響應結果

text()：將返回體處理成字符串類型
json()：返回結果和JSON.parse(response)一樣

fetch('/abc').then(data=>{
    // return data.text();
    return data.json();
}).then(ret=>{
    console.log(ret);
})

接口調(diào)用-axios

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

它具有以下特性
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請求和響應
- 自動轉換JSON數(shù)據(jù)

基本用法

axios.get('/adata')
     .then(ret=>{
         // data屬性名稱是固定的曼追，用于獲取后臺響應數(shù)據(jù)
         console.log(ret.data);
     })

axios常用的API

get：查詢數(shù)據(jù)
post：添加數(shù)據(jù)
put：修改數(shù)據(jù)
delete：刪除數(shù)據(jù)

axios的參數(shù)傳遞

GET傳遞參數(shù)

通過URL傳遞參數(shù)

axios.get('/adata?id=123')
     .then(ret=>{
         console.log(ret.data);
     })

axios.get('/adata/123')
     .then(ret=>{
         console.log(ret.data);
     })

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

axios.get('/adata',{
    params: {
        id: 123
    }
})
     .then(ret=>{
         console.log(ret.data);
     })

DELETE傳遞參數(shù)

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

axios.delete('/adata?id=123')
     .then(ret=>{
         console.log(ret.data);
     })

axios.delete('/adata/123')
     .then(ret=>{
         console.log(ret.data);
     })

axios.delete('/adata',{
    params: {
        id: 123
    }
})
     .then(ret=>{
         console.log(ret.data);
     })

POST傳遞參數(shù)

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

axios.post('/adata', {
    uname: 'tom',
    pwd: 123
}).then(ret=>{
    console.log(ret.data) 
})

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

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api/test', params).then(ret=>{
    console.log(ret.data);
})

PUT請求

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

axios.put('/adata', {
    uname: 'tom',
    pwd: 123
}).then(ret=>{
    console.log(ret.data) 
})

axios 的響應結果

響應結果的主要屬性
- data：實際響應回來的數(shù)據(jù)
- headers：響應頭信息
- status：響應狀態(tài)碼
- statusText：響應狀態(tài)信息
axios 的全局配置
- axios.defaults.timeout=3000; 超過時間
- axios.defaults.baseURL='http://localhost:3000/app'; 默認地址
- axios.defaults.headers['mytoken']= 'aqwerwqwerqwer2ewrwe23eresdf23' 設置請求頭

axios 攔截器

請求攔截器

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

// 添加一個請求攔截器
axios.interceptors.request.use(function(config) {
    // 在請求之前進行一些信息設置
    return config;
},function(err) {
    // 處理響應的錯誤信息
});

響應攔截器

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

// 添加一個響應攔截器
axios.interceptors.response.use(function(res) {
    // 在這里對返回的數(shù)據(jù)進行處理
    return config;
},function(err) {
    // 處理響應的錯誤信息
});

接口調(diào)用-async/await 的基本用法

async/await是ES7引入的新語法窍仰，可以更加方便地進行異步操作
async關鍵字用于函數(shù)上(async函數(shù)的返回值是Promise實例對象)
await關鍵字用于async函數(shù)內(nèi)部(await可以得到異步的結果)

async function queryData(id) {
    const ret = await axios.get('/data');
    return ret;
}
queryData.then(ret=>{
    console.log(ret)
})

`async`/`await`處理多個異步請求

// 多個異步請求的場景
async function queryData(id) {
    const info = await axios.get('/async');
    const ret = await axios.get(`async2?info=` + info.data);
    return ret;
}
queryData.then(ret=>{
    console.log(ret);
})