【vue學習】axios

Ajax、fetch、axios的區別與優缺點

axios的github地址

原生ajax

//建立異步對象 
    var xhr = new XMLHttpRequest();
    //設置請求基本信息，並加上請求頭
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.open('post', 'test.php' );
    //發送請求
    xhr.send('name=Lan&age=18');
    xhr.onreadystatechange = function () {
        // 這步爲判斷服務器是否正確響應
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
      } 
    };
複製代碼

jqueryAjax

var loginBtn =  document.getElementsByTagName("button")[0];
loginBtn.onclick = function(){
    ajax({
        type:"post",
        url:"test.php",
        data:"name=lan&pwd=123456",
        success:function(data){
           console.log(data);
        }
    });
}
複製代碼

fetch

fetch('http://www.mozotech.cn/bangbang/index/user/login', {
    method: 'post',
    headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams([
        ["username", "Lan"],["password", "123456"]
    ]).toString()
})
.then(res => {
    console.log(res);
    return res.text();
})
.then(data => {
    console.log(data);
})
複製代碼

axios

axios({
    method: 'post',
    url: '/abc/login',
    data: {
        userName: 'Lan',
        password: '123'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
複製代碼

同時發起多個請求：

對比

1. 幾種方式的對比

方式	優缺點
ajax	【優勢：局部更新；原生支持】【缺點：可能破壞瀏覽器後退功能；嵌套回調】
jqueryAjax	【在原生的ajax的基礎上進行了封裝；支持jsonp】
fetch	【優勢：解決回調地獄】【缺點：API 偏底層，須要封裝;默認不帶Cookie，須要手動添加; 瀏覽器支持狀況不是很友好，須要第三方的ployfill】
axios	【幾乎完美】

2. axios的特色

axios特色
支持瀏覽器和node.js
支持promise
能攔截請求和響應
能轉換請求和響應數據
能取消請求
自動轉換JSON數據
瀏覽器端支持防止CSRF(跨站請求僞造)

axios提問

1. 如何將axios異步請求同步化處理？

//使用 asyns/await 
async getHistoryData (data) {
 try {
   let res = await axios.get('/api/survey/list/', {
     params: data
   })
   this.tableData = res.data.result
   this.totalData = res.data.count
 } catch (err) {
   console.log(err)
   alert('請求出錯！')
 }
}
複製代碼

2. 爲什麼官方推薦使用axios而不用vue-resource？

   在Vue1.x中，官方推薦使用的ajax庫是vue-resource。到了Vue2.x，官方（尤大）推薦的ajax庫改成了Axios，按照說法是由於已有一個更完備的輪子，就不須要造一個新的。

3. 你瞭解axios的原理嗎？有看過它的源碼嗎？

   Axios源碼深度剖析

4. 你有封裝過axios嗎？主要是封裝哪方面的？

   具體config配置參考

   

   到具體頁面中的應用：

   

5. 如何中斷（取消）axios的請求？

   

6. axios怎麼解決跨域的問題？

   

   • 若是 server 端是本身開發的，那麼修改相關代碼支持跨域便可。若是不是本身開發的，那麼能夠本身寫個後端轉發該請求，用代理的方式實現。

   • 跨域這個行爲是瀏覽器禁止（瀏覽器不容許當前頁面的所在的源去請求另外一個源的數據）的，可是服務端並不由止

   • 源指協議、端口、域名。只要這個3箇中有一個不一樣就是跨域。 這裏列舉一個經典的列子：

     協議跨域：
     http://a.baidu.com訪問https://a.baidu.com；
     端口跨域：
     http://a.baidu.com:8080訪問http://a.baidu.com:80；
     域名跨域：
     http://a.baidu.com訪問http://b.baidu.com；
     複製代碼

   • 關鍵字:Access-control-Allow-origin、跨域

   • 幾種解決跨域的方法

   • A） 開發模式下，能夠在config中配置proxyTable便可

     

   • B） 服務端基於spring實現

     

   • C） CORS：①即跨源資源共享，它定義了一種瀏覽器和服務器交互的方式來肯定是否容許跨域請求。 ②它是一個妥協，有更大的靈活性，但比起簡單地容許全部這些的要求來講更加安全。③可是CORS也具備必定的風險性，好比請求中只能說明來自於一個特定的域但不能驗證是否可信，並且也容易被第三方入侵。 ④這裏通常須要後端配合,開啓cors。通常各類語言都有相似的包。好比NodeJS的koa2-cors

     

   • D） Nginx代理proxy

     

   • E） express代理

     

   • 請求頭自動攜帶cookie時:config中配置withCredentials:true，不然爲false【看到有人說：withCredentials爲true的狀況下，後端要設置Access-Control-Allow-Origin爲你的源地址，例如http://localhost:8080，不能是*，並且還要設置header('Access-Control-Allow-Credentials: true')】

   • config中配置qs：避開ajax信使請求，併兼容Android？

   import Qs from 'qs'
   複製代碼