原生ajax，JQuery，fetch和axios簡略分析，整理了一些出來，記錄成長02

接口調用方式

原生ajax
基于jQuery的ajax
fetch
axios

異步

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

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>

基于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>

Promise 基本API

執行個體方法

.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>

靜态方法

.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>

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>

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)
            });

        # 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>

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)
    })

axios

基于promise用于浏覽器和node.js的http用戶端
支援浏覽器和node.js
支援promise
能攔截請求和響應
自動轉換JSON資料
能轉換請求和響應資料

axios基礎用法

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

# 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)
    })

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';

axios 攔截器

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

# 1. 請求攔截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 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)
    })

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.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，JQuery，fetch和axios簡略分析，整理了一些出來，記錄成長02

接口調用方式

異步

promise

基于Promise發送Ajax請求

Promise 基本API

執行個體方法

.then()

.catch()

.finally()

靜态方法

.all()

.race()

fetch

fetch API 中的 HTTP 請求

fetchAPI 中響應格式

axios

axios基礎用法

axios 全局配置

axios 攔截器

async 和 await

繼續閱讀

jQuery實作百度搜尋框

2010年終總結--技術篇

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

jQuery練習一. 選擇器練習二. DOM操作練習三. 事件練習

struts2 +jquey uploadify3.2 實作多檔案上傳，可預覽、删除、排序

underscore模闆功能的使用和學習

JQuery--dom捕獲html元素

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

jquery_126_demo

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

原生ajax，JQuery，fetch和axios簡略分析，整理了一些出來，記錄成長02

接口調用方式

異步

promise

基于Promise發送Ajax請求

Promise 基本API

執行個體方法

.then()

.catch()

.finally()

靜态方法

.all()

.race()

fetch

fetch API 中的 HTTP 請求

fetchAPI 中 響應格式

axios

axios基礎用法

axios 全局配置

axios 攔截器

async 和 await

繼續閱讀

fetchAPI 中響應格式