接口調用方式-fetch用法、axios用法（全局配置、攔截器）、async/await用法

fetch用法

基本特性

• 更加簡單的數據獲取方式，功能更強大、更靈活，可以看做是xhr的升級版
• 基於Promise實現

語法結構

 fetch(url).then(fn2)
            .then(fn3)
            ...
            .catch(fn)

fetch 的基本用法

  fetch('/abc').then(data=>{
      return data.text();
  }).then(ret=>{
      // 注意這裏得到的纔是最終的數據
      console.log(ret);
  });
使用fatch在then()中必須使用text()接收數據
text()方法返回的是Promise實例對象、所以要在下一個then()中接收結果

fetch請求參數

• method(String): HTTP請求方法，默認爲GET (GET、POST、PUT、DELETE)
• body(String): HTTP的請求參數
• headers(Object): HTTP的請求頭，默認爲{}

 fetch('/abc' , {
    method: ‘get’
 }).then(data=>{
    return data.text();
 }).then(ret=>{
    // 注意這裏得到的纔是最終的數據
    console.log(ret);
 });

- 需要在 options 對象中 指定對應的 method       method:請求使用的方法 
- post 和 普通 請求的時候 需要在options 中 設置  請求頭 headers   和  body

fetch響應結果

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

    /*
      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用法

基本特性

• 支持瀏覽器和 node.js
• 支持 promise
• 能攔截請求和響應
• 自動轉換 JSON 數據

axios 的基本用法

 axios.get('/adata')
         //接收的是對象
       .then(ret=>{
          // data屬性名稱是固定的，用於獲取後臺響應的數據
          console.log(ret.data)
       })

axios常用API：

get()   post()  put()   delete()
查詢數據、添加數據、修改數據、 刪除數據

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