国产探花网址大全观看,好吊日在线免费看,日韩久久久久久久久

前后端交互

前后端交互模式
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默認(rèn)端口80，可以省略
  4. path：路徑。例如/abc/a/b/c
  5. query：查詢參數(shù)。例如uname=zhangsan&age=12
  6. fragment：錨點(diǎn)(哈希Hash),用于定位頁(yè)面的某個(gè)位置
Restful形式的URL
- http請(qǐng)求方式
  1. GET：查詢
  2. POST：添加
  3. PUT：修改
  4. DELETE：刪除

Promise用法

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

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

使用Promise主要有以下好處

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

Promise對(duì)象提供了簡(jiǎn)潔的API，使得控制異步操作更加容易

實(shí)例化Promise對(duì)象，構(gòu)造函數(shù)中傳遞函數(shù)，該函數(shù)用于處理異步任務(wù)

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

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

基于Promise處理Ajax請(qǐng)求

// 處理原生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('服務(wù)器錯(cuò)誤');
            }
        };
        xhr.open('get',url);
        xhr.send(null);
    });
    return p;
}

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

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

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

Promise常用的API

實(shí)例方法

p.then() 得到異步任務(wù)的正確結(jié)果
p.catch() 獲取異常信息
p.finally() 成功與否都會(huì)執(zhí)行(尚且不是正式標(biāo)準(zhǔn))

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

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

接口調(diào)用-fetch

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

語(yǔ)法結(jié)構(gòu)

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

fetch的基本語(yǔ)法

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

fetch 請(qǐng)求參數(shù)

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

GET請(qǐng)求方式的參數(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請(qǐng)求方式的參數(shù)傳遞

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

POST請(qǐng)求的參數(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請(qǐng)求參數(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 響應(yīng)結(jié)果
- text()：將返回體處理成字符串類型
- json()：返回結(jié)果和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) 是一個(gè)基于promise用于瀏覽器和node.js的HTTP客戶端

它具有以下特性
- 支持瀏覽器和node.js
- 支持promise
- 能攔截請(qǐng)求和響應(yīng)
- 自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

基本用法

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

axios常用的API

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

axios的參數(shù)傳遞

GET傳遞參數(shù)

通過(guò)URL傳遞參數(shù)

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

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

通過(guò)params選項(xiàng)傳遞參數(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ù)

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

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

通過(guò)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請(qǐng)求

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

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

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

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

axios 攔截器

請(qǐng)求攔截器

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

// 添加一個(gè)請(qǐng)求攔截器
axios.interceptors.request.use(function(config) {
    // 在請(qǐng)求之前進(jìn)行一些信息設(shè)置
    return config;
},function(err) {
    // 處理響應(yīng)的錯(cuò)誤信息
});

響應(yīng)攔截器

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

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

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

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

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

`async`/`await`處理多個(gè)異步請(qǐng)求

// 多個(gè)異步請(qǐng)求的場(chǎng)景
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);
})

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue(3)

Vue(3)

前后端交互

接口調(diào)用方式

URL地址格式

Promise用法

基于Promise處理Ajax請(qǐng)求

Promise常用的API

接口調(diào)用-fetch

接口調(diào)用-axios

axios常用的API

axios的參數(shù)傳遞

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

axios 攔截器

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

`async`/`await`處理多個(gè)異步請(qǐng)求

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue(3)

前后端交互

接口調(diào)用方式

URL地址格式

Promise用法

基于Promise處理Ajax請(qǐng)求

Promise常用的API

接口調(diào)用-fetch

接口調(diào)用-axios

axios常用的API

axios的參數(shù)傳遞

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

axios 攔截器

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

async/await處理多個(gè)異步請(qǐng)求

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

`async`/`await`處理多個(gè)異步請(qǐng)求