API前後端互動模式

Yueqin0512發表於2020-12-01
API後端模式

文章目錄

URL地址格式

1. 傳統形式的URL

格式：schema://host:port/path?query#fragment

  • schema:協議。例如http、https、ftp等
  • host：域名或者ip地址
  • port：埠，http預設埠為80，可以省略
  • path：路徑（虛擬路徑，區分不同資源），例如/abc/a/b/charset
  • query：引數查詢。例如uname=lisi&age=12
  • fragment：錨點（雜湊hash），用於定位頁面的某個位置

2. Restful形式的URL

（前端通過Ajax呼叫一個URL地址,後臺根據這個地址去返回對應的資料，然後在前端進行資料的渲染）

Http請求方式:

  • GET 查詢
  • POST 新增
  • PUT 修改
  • DELRETE 刪除

Promise

1. Promise概述

是非同步程式設計的一種解決方案，從語法上講，Promise是一個物件，從他可以獲取非同步操作的訊息

使用Promise的好處

（1）可以避免多層非同步呼叫巢狀問題
（2）Promise物件提供了簡介的API，使得控制非同步操作更加容易

2. Promise基本用法

（1）例項化Promise物件，建構函式中傳遞函式，該函式用於非同步處理任務
（2）resolv和reject兩個引數用於處理成功和失敗兩種情況，並通過p.then獲取處理結果

<script>
  var p = new Promise(function(resolve, reject){
    //這裡用於實現非同步任務
    setTimeout(function(){
      var flag = false;
      if (flag) {
        //正常情況
        resolve('hello');
      }else{
        //異常情況
        reject('出錯了');
      }
    }, 100);
  })
  p.then(function(data){
    console.log(data);
  },function(info){
    console.log(info)
  });
</script>

3. Promise常用的API

(1)p.then得到非同步任務的正確結果
(2)p.catch獲取異常資訊
(3)p.finally()成功與否都會執行（尚且不是正式標準）

<script>
  function foo(){
    return new Promise(function(resolve, reject){
     setTimeout(function(){
       resolve(123);
       // reject("cuo")
     },100);
    })
  }
  foo()
  .then(function(data){
    console.log(data);
  })
  .catch(function(data){
    console.log(data);
  })
  .finally(function(){
    console.log('finished');
  })
</script>

(4)Promise.all()併發處理多個非同步任務，所有任務都執行完成才能得到結果

<script>
  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){
    console.log(result)
  })
</script>

(5)Promise.race()併發處理多個非同步任務，只要有一個任務完成就能得到結果

fetch

更加簡單的資料獲取方式，功能強大，更靈活，可以看作是xhr的升級版(基於Promise實現)

<script>
  fetch().then(function(data){
    //text（）方法屬於fetchAPI的一部分，它返回一個Promise示例物件，用於獲取後臺返回的資料
    return data.text();
  }).then(function(data){
    //注意這裡得到的才是最終的資料
    console.log(data);
  })
</script>

1. 請求引數

常用配置選項

（1）methods(String):Http請求方法，預設為GET

（2）body(String):HTTP的請求引數

（3）header(Object):HTTP的請求頭，預設為{}

2. 引數傳遞

（1）get請求方式的引數傳遞

<script>
  fetch('http://localhost:3000/fdata',{
    methods: 'get'
  }).then(function(data){
    //text（）方法屬於fetchAPI的一部分，它返回一個Promise示例物件，用於獲取後臺返回的資料
    return data.text();
  }).then(function(data){
    //注意這裡得到的才是最終的資料
    console.log(data);
  })

  fetch('http://localhost:3000/books/456',{
    methods: 'get'
  }).then(function(data){
    return data.text();
  }).then(function(data){
    console.log(data);
  })
</script>

（1）delete請求方式的引數傳遞

<script>
  fetch('http://localhost:3000/books/789',{
    methods: 'delete'
  }).then(function(data){
    return data.text();
  }).then(function(data){
    console.log(data);
  })
</script>

（1）post請求方式的引數傳遞

<script>
    fetch('http://localhost:3000/books/789',{
      methods: 'post',
      body: 'uname=lisi&pwd=123',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }).then(function(data){
      //text（）方法屬於fetchAPI的一部分，它返回一個Promise示例物件，用於獲取後臺返回的資料
      return data.text();
    }).then(function(data){
      //注意這裡得到的才是最終的資料
      console.log(data);
    })

    fetch('http://localhost:3000/books/789',{
      methods: 'post',
      body: JSON.stringify({
        uname: '張三',
        pwd: '345'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    }).then(function(data){
      //text（）方法屬於fetchAPI的一部分，它返回一個Promise示例物件，用於獲取後臺返回的資料
      return data.text();
    }).then(function(data){
      //注意這裡得到的才是最終的資料
      console.log(data);
    })
  </script>

（2）put請求方式的引數傳遞

<script>
  fetch('http://localhost:3000/books/123',{
    methods: 'put',
    body: JSON.stringify({
      uname: '張三',
      pwd: '3885'
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(function(data){
    //text（）方法屬於fetchAPI的一部分，它返回一個Promise示例物件，用於獲取後臺返回的資料
    return data.text();
  }).then(function(data){
    //注意這裡得到的才是最終的資料
    console.log(data);
  })      
</script>

fetch響應結果–響應資料格式

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

<script>
  fetch('http://localhost:3000/books/123').then(function(data){
    return data.json();
  }).then(function(data){
    console.log(data);
  })
</script>

axios

1.引數傳遞

（1）GET的引數傳遞

通過URL傳遞引數

<script>
  axios.get('http://localhost:80/Users?id=123').then(function(ret){
    //注意data屬性是固定的用法，用於獲取後臺的實際資料
    console.log(ret.data)
  })
</script>

<script>
  axios.get('http://localhost:80/Users/123').then(function(ret){
    //注意data屬性是固定的用法，用於獲取後臺的實際資料
    console.log(ret.data)
  })
</script>

通過params選項傳遞引數

<script>
  axios.get('http://localhost:80/axios',{
    params: {
      id: 789
    }
  }).then(function(ret){
    console.log(ret.data)
  })
</script>

（2） DELETE的引數傳遞

通過URL傳遞引數
通過params選項傳遞引數

<script>
  axios.delete('http://localhost:80/axios',{
    params: {
      id: 789
    }
  }).then(function(ret){
    console.log(ret.data)
  })
</script>

（3）POST的引數傳遞

  1. 通過選項傳遞引數（預設傳遞的是json格式的資料)
<script>
  axios.post('http://localhost:80/axios',{
    uname: 'lisi',
    pwd: 123,
  }).then(function(ret){
    console.log(ret.data)
  })
</script>
  1. 通過URLSearParams傳遞引數
<script>
  var params = new URLSearParams();
  params.append('uname', 'zhangsan');
  params.append('pwd', '123');
  axios.post('http://localhost:80/axios', params).then(function(ret){
    console.log(ret.data)
  })
</script>

（4）PUT的引數傳遞

通過選項傳遞引數（預設傳遞的是json格式的資料）

<script>
  axios.put('http://localhost:80/axios/123',{
    uname: 'lisi',
    pwd: 123,
  }).then(function(ret){
    console.log(ret.data)
  })
</script>

通過URLSearParams傳遞引數（表單）

2. axios的響應結果

響應結果的主要屬性：

  • data:實際響應回來的資料
  • headers：響應頭資訊
  • status：響應狀態碼
  • statusTest：響應狀態資訊

3.axios的全域性配置

  1. 超時時間
<script>
  axios.defaults.timeout = 3000;
</script>
  1. 預設地址
<script>
  //配置請求的基準URL地址，自動拼接
  axios.defaults.baseURL = 'http://localhost:80/';
  axios.get('Users').then(function(ret){
	 //注意data屬性是固定的用法，用於獲取後臺的實際資料
	  console.log(ret.data)
  })
</script>
  1. 配置請求頭資訊
<script>
  axios.defaults.baseURL = 'http://localhost:80/';
  axios.defaults.headers['mytoken'] = 'hello';
  axios.get('Users').then(function(ret){
    console.log(ret.data)
  })
</script>

4.axios攔截器

（1）請求攔截器

在請求發出之前設定一些資訊

<script>
  axios.interceptors.request.use(function(config){
    console.log(config.url);
    config.headers.mytoken = 'nihao';
   return config;
  },function(err){
   console.log(err);
  })
  axios.get('http://localhoost:80/Users').then(function(data){
    console.log(data);
  })
</script>

（2）響應攔截器

在獲取資料之前對資料做一些加工處理

<script>
   axios.interceptors.response.use(function(res){
    var data = res.data;
     return data;
   },function(err){
     console.log(err);
   })
   axios.get('http://localhoost:80/Users').then(function(data){
     console.log(data);
   })
</script>

相關文章