1. 接口調用方式

原生ajax
基於jQuery的ajax
fetch
axios

2. 異步

JavaScript的執行環境是「單線程」
所謂單線程，是指JS引擎中負責解釋和執行JavaScript代碼的線程只有一個，也就是一次只能完成一項任務，這個任務執行完後才能執行下一個，它會「阻塞」其他任務。這個任務可稱爲主線程
異步模式可以一起執行多個任務
JS中常見的異步調用
- 定時器
- ajax
- 事件函數

3. promise

主要解決異步深層嵌套的問題
promise 提供了簡潔的API 使得異步操作更加容易

 <script type="text/javascript">
    /*
     1. Promise基本使用
     我們使用new來構建一個Promise  Promise的構造函數接收一個參數，是函數，並且傳入兩個參數：resolve，reject， 分別表示異步操作執行成功後的回調函數和異步操作執行失敗後的回調函數
    */
    var p = new Promise(function(resolve, reject){
      //2. 這裏用於實現異步任務  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情況
          resolve('hello');
        }else{
          //4. 異常情況
          reject('出錯了');
        }
      }, 100);
    });
    //  5 Promise實例生成以後，可以用then方法指定resolved狀態和reject狀態的回調函數 
    //  在then方法中，你也可以直接return數據而不是Promise對象，在後面的then中就可以接收到數據了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>

4. 基於Promise發送Ajax請求

<script type="text/javascript">
    /*
      基於Promise發送Ajax請求
    */
    function queryData(url) {
   //  1.1 創建一個Promise實例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 1.2 處理正常的情況
            resolve(xhr.responseText);
          }else{
            // 1.3 處理異常情況
            reject('服務器錯誤');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	// 注意：  這裏需要開啓一個服務 
    // 在then方法中，你也可以直接return數據而不是Promise對象，在後面的then中就可以接收到數據了
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        // 1.4 想要繼續鏈式編程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>

5. Promise 基本API

5.1 實例方法

.then()

得到異步任務正確的結果

.catch()

獲取異常信息

.finally()

成功與否都會執行（不是正式標準）

 <script type="text/javascript">
    /*
      Promise常用API-實例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 兩種寫法是等效的
    foo()
      .then(function(data){
        // 得到異步任務正確的結果
        console.log(data)
      },function(data){
        // 獲取異常信息
        console.log(data)
      })
      // 成功與否都會執行（不是正式標準） 
      .finally(function(){
        console.log('finished')
      });
  </script>

5.2 靜態方法

.all()

Promise.all方法接受一個數組作參數，數組中的對象（p1、p2、p3）均爲promise實例（如果不是一個promise，該項會被用Promise.resolve轉換爲一個promise)。它的狀態由這三個promise實例決定

.race()

Promise.race方法同樣接受一個數組作參數。當p1, p2, p3中有一個實例的狀態發生改變（變爲fulfilled或rejected），p的狀態就跟着改變。並把第一個改變狀態的promise的返回值，傳給p的回調函數

  <script type="text/javascript">
    /*
      Promise常用API-對象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        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);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的參數  [p1,p2,p3]   和 返回的結果一 一對應["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由於p1執行較快，Promise的then()將獲得結果'P1'。p2,p3仍在繼續執行，但執行結果將被丟棄。
      console.log(result) // "HELLO TOM"
    })
  </script>

6. fetch

Fetch API是新的ajax解決方案 Fetch會返回Promise
fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。
fetch(url, options).then(）

<script type="text/javascript">
    /*
      Fetch API 基本用法
      	fetch(url).then()
     	第一個參數請求的路徑   Fetch會返回Promise   所以我們可以使用then 拿到請求成功的結果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法屬於fetchAPI的一部分，它返回一個Promise實例對象，用於獲取後臺返回的數據
      return data.text();
    }).then(function(data){
      //   在這個then裏面我們能拿到最終的數據  
      console.log(data);
    })
  </script>

6.1 fetch API 中的 HTTP 請求

fetch(url, options).then(）
HTTP協議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默認的是 GET 請求
- 需要在 options 對象中指定對應的 method method:請求使用的方法
- post 和普通請求的時候需要在options 中設置請求頭 headers 和 body

   <script type="text/javascript">
        /*
              Fetch API 調用接口傳遞參數
        */
       // 1.1 GET參數傳遞 - 傳統URL  通過url  ？ 的形式傳參 
        fetch('http://localhost:3000/books?id=123', {
            	# get 請求可以省略不寫 默認的是GET 
                method: 'get'
            })
            .then(function(data) {
            	// 它返回一個Promise實例對象，用於獲取後臺返回的數據
                return data.text();
            }).then(function(data) {
            	// 在這個then裏面我們能拿到最終的數據  
                console.log(data)
            });

      // 1.2  GET參數傳遞  restful形式的URL  通過/ 的形式傳遞參數  即  id = 456 和id後臺的配置有關   
        fetch('http://localhost:3000/books/456', {
            	// get 請求可以省略不寫 默認的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       // 2.1  DELETE請求方式參數傳遞      刪除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       // 3 POST 請求傳參
        fetch('http://localhost:3000/books', {
                method: 'post',
            	// 3.1  傳遞數據 
                body: 'uname=lisi&pwd=123',
            	//  3.2  設置請求頭 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       // POST請求傳參
        fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '張三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        // 4 PUT請求傳參     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '張三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            })
    </script>

6.2 fetchAPI 中響應格式

用fetch來獲取數據，如果響應正常返回，我們首先看到的是一個response對象，其中包括返回的一堆原始字節，這些字節需要在收到後，需要我們通過調用方法將其轉換爲相應格式的數據，比如JSON，BLOB或者TEXT等等

  /*
      Fetch響應結果的數據格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  將獲取到的數據使用 json 轉換對象
      return data.text(); //  //  將獲取到的數據 轉換成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

7. axios

基於promise用於瀏覽器和node.js的http客戶端
支持瀏覽器和node.js
支持promise
能攔截請求和響應
自動轉換JSON數據
能轉換請求和響應數據

7.1 axios基礎用法

get和 delete請求傳遞參數
- 通過傳統的url 以 ? 的形式傳遞參數
- restful 形式傳遞參數
- 通過params 形式傳遞參數
post 和 put 請求傳遞參數
- 通過選項傳遞參數
- 通過 URLSearchParams 傳遞參數

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
  	// 1. 發送get 請求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      // 拿到 ret 是一個對象  所有的對象都存在 ret 的data 屬性裏面
      // 注意data屬性是固定的用法，用於獲取後臺的實際數據
      // console.log(ret.data)
      console.log(ret)
    })
	// 2.  get 請求傳遞參數
    // 2.1  通過傳統的url  以 ? 的形式傳遞參數
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    // 2.2  restful 形式傳遞參數 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	// 2.3  通過params  形式傳遞參數 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	// 3 axios delete 請求傳參   傳參的形式和 get 請求一樣
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	// 4  axios 的 post 請求
    // 4.1  通過選項傳遞參數
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	// 4.2  通過 URLSearchParams  傳遞參數 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	// 5  axios put 請求傳參 和 post 請求一樣 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
</script>

後臺路由

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
// 處理靜態資源
app.use(express.static('public'))
// 處理參數
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get 傳遞參數' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 傳遞參數' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios delete 傳遞參數' + req.query.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 傳遞參數' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 傳遞參數' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

7.2 axios 全局配置

//  配置公共的請求頭 
axios.defaults.baseURL = 'https://api.example.com';
// 配置 超時時間
axios.defaults.timeout = 2500;
//  配置公共的請求頭
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

7.3 axios 攔截器

請求攔截器
- 請求攔截器的作用是在請求發送前進行一些操作
  - 例如在每個請求體里加上token，統一做了處理如果以後要改也非常容易
響應攔截器
- 響應攔截器的作用是在接收到響應後進行一些操作
  - 例如在服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁

 <script type="text/javascript" src="js/axios.js"></script>
 <script>
 				// 1. 請求攔截器
			axios.interceptors.request.use(function(config) {
		      console.log(config.url) // http://localhost:3000/adata
		      // 1.1  任何請求都會經過這一步   在發送請求之前做些什麼   
		      config.headers.mytoken = 'nihao';
		      // 1.2  這裏一定要return   否則配置不成功  
		      return config;
		    }, function(err){
		       // 1.3 對請求錯誤做點什麼    
		      console.log(err)
		    })
		// 2. 響應攔截器 
	    axios.interceptors.response.use(function(res) {
	      // 2.1  在接收響應做些什麼  
	      var data = res.data;
	      return data;
	    }, function(err){
	      // 2.2 對響應錯誤做點什麼  
	      console.log(err)
	    })
	    // 發送get請求
	    axios.get('http://localhost:3000/adata').then(function(data){
      		console.log(data)
    	})
 </script>

8. async 和 await

async作爲一個關鍵字放到函數前面
- 任何一個async函數都會隱式返回一個promise
await關鍵字只能在使用async定義的函數中使用
- await後面可以直接跟一個 Promise實例對象
- await函數不能單獨使用
async/await 讓異步代碼看起來、表現起來更像同步代碼

// 1.  async 基礎用法
    // 1.1 async作爲一個關鍵字放到函數前面
	async function queryData() {
      // 1.2 await關鍵字只能在使用async定義的函數中使用      await後面可以直接跟一個 Promise實例對象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	// 1.3 任何一個async函數都會隱式返回一個promise   我們可以使用then 進行鏈式編程
    queryData().then(function(data){
      console.log(data)
    })

	// 2.  async   函數處理多個異步函數
	// axios 配置默認路由
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      // 2.1  添加await之後 當前的await 返回結果之後纔會執行後面的代碼   
      
      var info = await axios.get('async1');
      // 2.2  讓異步代碼看起來、表現起來更像同步代碼
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

接口調用方式——Ajax,fetch,axios

文章目錄

1. 接口調用方式

2. 異步

3. promise

4. 基於Promise發送Ajax請求

5. Promise 基本API

5.1 實例方法

.then()

.catch()

.finally()

5.2 靜態方法

.all()

.race()

6. fetch

6.1 fetch API 中的 HTTP 請求

6.2 fetchAPI 中響應格式

7. axios

7.1 axios基礎用法

7.2 axios 全局配置

7.3 axios 攔截器

8. async 和 await

【SQL進階】CASE語句的使用

CSDN怎麼自動生成目錄

VueRouter學習筆記

微信小程序知識點整理(二)——wxs簡介

同源政策、跨域及解決方法——jsonp,CORS

模塊化相關規範

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

接口調用方式——Ajax,fetch,axios

文章目錄

1. 接口調用方式

2. 異步

3. promise

4. 基於Promise發送Ajax請求

5. Promise 基本API

5.1 實例方法

.then()

.catch()

.finally()

5.2 靜態方法

.all()

.race()

6. fetch

6.1 fetch API 中的 HTTP 請求

6.2 fetchAPI 中 響應格式

7. axios

7.1 axios基礎用法

7.2 axios 全局配置

7.3 axios 攔截器

8. async 和 await

6.2 fetchAPI 中響應格式