jquery ajax

jq 的ajax是對原生XHR的封裝，除此以外還增添了對JSONP的支持。用起來非常方便

用法：

 $.ajax({
        url:發送請求的地址,
        data:數據的拼接,//發送到服務器的數據
        type:‘get‘,//請求方式，默認get請求
        dataType:‘json‘,//服務器返回的數據類型
        async:true,//是否異步，默認true
        cache:false,//設置為 false 將不會從瀏覽器緩存中加載請求信息
        success:function
 
(){},//請求成功後的回調函數（這個函數會得到一個參數：從服務器返回的數據）
        error: function(){}//請求失敗時調用此函數

 })

優缺點：

• 本身是針對MVC的編程,不符合現在前端MVVM的浪潮
• 基於原生的XHR開發，XHR本身的架構不清晰，已經有了fetch的替代方案
• JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理（采取個性化打包的方案又不能享受CDN服務）
• 配置和調用方式非常混亂，而且基於事件的異步模型不友好

fetch

原生提供的ajax請求的一種方式，用於獲取資源

由於Fetch API是基於Promise設計，舊瀏覽器不支持Promise，需要使用pollyfill es6-promise

fetch的優勢：

• 語義簡潔，更加語義化
• 更加底層，提供的API豐富（request, response）
• 脫離了XHR，是ES規範裏新的實現方式
• 基於promise實現，支持async/await

用法：

get方式

fetch(‘/users?‘+new URLSearchParams(obj).toString())
    .then(d=>d.json())
    .then(d=>{
       console.log(d);
})

post方式

fetch(‘/users‘,{
         method:‘post‘,
         headers:{
 
‘Content-Type‘:‘application/x-www-form-urlencoded‘},//設置頭信息
         body:new URLSearchParams(obj).toString()//將對象變為url地址上的查詢信息
    })
   .then(d=>d.json())
   .then(d=>{
            console.log(d);
})

axios

用法：

get方式

axios.get(‘/get?user=xiaohuang‘)
.then(e=>{  //進了then就會成功，否則會進catch
    console.log(e);
})
.catch(e=>{
    //報錯內容
})

post方式

axios({
    method: ‘post‘,
    url: ‘/user/12345‘,
    data: {
        firstName: ‘Fred‘,
        lastName: ‘Flintstone‘
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
})

特性：

• 從 node.js 創建 http 請求
• 支持 Promise API
• 客戶端支持防止CSRF
• 提供了一些並發請求的接口
• 自動轉換JSON數據

栗子：

get請求成功之後 再請求post 然後 兩個條件都成立 才執行結果

axios.get(‘/get?user=xiaoming‘)
.then(e=>{
    if(e.data.code == 0){
        //這裏的目的是為了進下一次的then
        return axios.post(‘/post‘,{
            user:‘xiaohong‘
        })
        else{
            //這裏目的是為了進下一次的catch
            throw ‘失敗‘;
        }
    }
})
.then(e=>{
    if(e.data.code == 0){
        console.log(‘芝麻開門‘);
    }else{
        throw ‘開門‘;
    }
})
.catch(e=>{
    console.log(e);
})

axios.all

同時執行多個請求，all裏面必須兩個請求都成立才返回成功（只要一個請求失敗，整體都會失敗）

 let arr = [get(),post()];
        axios.all(arr)
        .then( axios.spread(function (a, b) {
            console.log(1);
            if(a.data.code == 0 && b.data.code == 0){
                console.log(‘變身‘);
            }else{
                console.log(‘再等一萬年‘);
            }
    })).catch(e=>{
            console.log(‘錯誤‘);
})

ajax、fetch、axios — 請求數據