axios,Ajax,jQuery ajax,axios和fetch的區別

田江發表於2018-03-27

提綱:

  1. Axios的概念
  2. 安裝
  3. Axios簡單示例
  4. Axios的API
  5. Axios的請求配置和響應資料格式
  6. Axios的攔截器
  7. Ajax,jQuery ajax,axios和fetch的區別

內容:

  1. Axios的概念
    axios 是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
特點:
從瀏覽器中建立 XMLHttpRequests
從 node.js 建立 http 請求
支援 Promise API
攔截請求和響應
轉換請求資料和響應資料
取消請求
自動轉換 JSON 資料

客戶端支援防禦 XSRF


2.安裝

安裝nodejs(自帶npm)

安裝cnpm(可選)
npm install -g cnpm --registry=https://registry.npm.taobao.org
初始化專案:
          npm init -y
Npm的方式安裝axios
          npm i axios  -D

3. Axios簡單示例

1)、get請求

let vueobj = this;
axios.get('api/goodslists', {
   params: { "goodsid":"01003" }
} )
.then(function (response) {
console.log(response.data);
  vueobj.goodslist = response.data; //把獲取到的資料賦給goodslist
})
.catch(function (error) {
           console.log(error);
});


2)、執行多個併發請求

getall:function(){
function getbooks(){  return axios.get('api/books');  }
function getreaders(){  return axios.get('api/readers');  }
axios.all([getbooks(), getreaders()]).then(
axios.spread(function (books, readers) { 
//兩個請求都完成後,呼叫該函式,第一個引數是第一個請求的結果,第二個引數是第二個請求的結果
console.log(books.data);
console.log(readers.data);
})
);
}



4.Axios的API

  • Axios函式
  • Axios請求的別名
  • Axios處理併發
  • 建立一個例項,例項方法

1)、axios函式:

axios(config)。在config物件引數裡,除了url外,其它的都可選的屬性。
axios 能夠在進行請求時的一些設定。如:
發起 get請求 let vueobj = this;
axios({ 
method:'get',
url:'api/goodslists', 
params :{ "goodsid":"01003" }
 })
 .then(function (response) {
vueobj.goodslist = response.data;
 })
 .catch(function (error) {
  console.log(error);

});


2)、axios請求的別名:

為了方便,axios提供了所有請求方法的重新命名支援,如下:
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

     1、axios.request(config)

let vueobj = this;
axios.request({ 
method:'get',
url:'api/goodslists', 
params:{ "goodsid":"01002" }
 })
 .then(function (response) {
vueobj.goodslist = response.data;
 })
 .catch(function (error) {
  console.log(error);
});

2. axios.get(url[,config])

let vueobj = this;
axios.get('api/goodslists', {
params:{
"goodsid":"01003"
}
})
.then(function (response) {
vueobj.goodslist = response.data;
})
.catch(function (error) {  
console.log(error);
});

3. Axios處理併發( Concurrency)

axios.all(iterable)//all函式執行所有的請求          

axios.spread(callback)//處理響應回來的回撥函式

程式碼:

getall:function(){
function getbooks(){  return axios.get('api/books');  }
function getreaders(){  return axios.get('api/readers');  }
axios.all([getbooks(), getreaders()]).then(
axios.spread(function (books, readers) { 
//兩個請求都完成後,呼叫該函式,第一個引數是第一個請求的結果,第二個引數是第二個請求的結果
console.log(books.data);
console.log(readers.data);
})
);
}

4.建立一個例項,例項方法

建立一個新的例項
axios.create([config])
例項方法
下面列出了一些例項方法。具體的設定將在例項設定中被合併。
axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#post(url[,data[,config]])
axios#put(url[,data[,config]])

axios#patch(url[,data[,config]])


程式碼:

//1、建立axios例項
var instance = axios.create({ 
method:'get',
url:'api/goodslists', 
params:{  "goodsid":"01002" }
 });
//2、傳送請求
instance.request()
 .then(function (response) {
console.log(response.data);
vueobj.goodslist = response.data;
 })
 .catch(function (error) {
  console.log(error);
});


5. Axios的 請求配置和響應資料格式

1)、請求的配置

//`url`是伺服器連結,用來請求用
    url:'/user',
    //`method`是發起請求時的請求方法
    method:`get`,
    //`baseURL`如果`url`不是絕對地址,那麼將會加在其前面。
    //當axios使用相對地址時這個設定非常方便
    //在其例項中的方法
    baseURL:'http://some-domain.com/api/',
    //`transformRequest`允許請求的資料在傳到伺服器之前進行轉化。
    //這個只適用於`PUT`,`GET`,`PATCH`方法。
    //陣列中的最後一個函式必須返回一個字串,一個`ArrayBuffer`,或者`Stream`
    transformRequest:[function(data){
        //依自己的需求對請求資料進行處理
        return data;
    }],
    //`transformResponse`允許返回的資料傳入then/catch之前進行處理
    transformResponse:[function(data){
        //依需要對資料進行處理
        return data;
    }],
    //`headers`是自定義的要被髮送的頭資訊
    headers:{'X-Requested-with':'XMLHttpRequest'},
    //`params`是請求連線中的請求引數,必須是一個純物件,或者URLSearchParams物件
    params:{         ID:12345    },




//`paramsSerializer`是一個可選的函式,是用來序列化引數
    //例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
    paramsSerializer: function(params){
        return Qs.stringify(params,{arrayFormat:'brackets'})
    },


    //`data`是請求提需要設定的資料
    //只適用於應用的'PUT','POST','PATCH',請求方法
    //當沒有設定`transformRequest`時,必須是以下其中之一的型別(不可重複?):
    //-string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParams
    //-僅瀏覽器:FormData,File,Blob
    //-僅Node:Stream
    data:{
        firstName:'fred'
    },
    //`timeout`定義請求的時間,單位是毫秒。
    //如果請求的時間超過這個設定時間,請求將會停止。
    timeout:1000,
    
    //`withCredentials`表明是否跨域請求,
    //應該是用證書
    withCredentials:false //預設值


    //`adapter`介面卡,允許自定義處理請求,這會使測試更簡單。
    //返回一個promise,並且提供驗證返回(檢視[response docs](#response-api))
    adapter:function(config){
        /*...*/
    },


//`xsrfHeaderName` 是http頭(header)的名字,並且該頭攜帶xsrf的值
    xrsfHeadername:'X-XSRF-TOKEN',//預設值


    //`onUploadProgress`允許處理上傳過程的事件
    onUploadProgress: function(progressEvent){
        //本地過程事件發生時想做的事
    },


    //`onDownloadProgress`允許處理下載過程的事件
    onDownloadProgress: function(progressEvent){
        //下載過程中想做的事
    },


    //`maxContentLength` 定義http返回內容的最大容量
    maxContentLength: 2000,


    //`validateStatus` 定義promise的resolve和reject。
    //http返回狀態碼,如果`validateStatus`返回true(或者設定成null/undefined),promise將會接受;其他的promise將會拒絕。
    validateStatus: function(status){
        return status >= 200 && stauts < 300;//預設
    },
    //`httpAgent` 和 `httpsAgent`當產生一個http或者https請求時分別定義一個自定義的代理,在nodejs中。
    //這個允許設定一些選選個,像是`keepAlive`--這個在預設中是沒有開啟的。
    httpAgent: new http.Agent({keepAlive:treu}),
    httpsAgent: new https.Agent({keepAlive:true}),


    //`proxy`定義伺服器的主機名字和埠號。
    //`auth`表明HTTP基本認證應該跟`proxy`相連線,並且提供證書。
    //這個將設定一個'Proxy-Authorization'頭(header),覆蓋原先自定義的。
    proxy:{
        host:127.0.0.1,
        port:9000,
        auth:{
            username:'cdd',
            password:'123456'
        }
    },


    //`cancelTaken` 定義一個取消,能夠用來取消請求
    //(檢視 下面的Cancellation 的詳細部分)
    cancelToke: new CancelToken(function(cancel){
    })
}


2)、響應資料的格式:

{
    //`data`是伺服器的提供的回覆(相對於請求)
    data{},


    //`status`是伺服器返回的http狀態碼
    status:200,




    //`statusText`是伺服器返回的http狀態資訊
    statusText: 'ok',


    //`headers`是伺服器返回中攜帶的headers
    headers:{},


    //`config`是對axios進行的設定,目的是為了請求(request)
    config:{}

}

使用 then ,你會接受打下面的資訊


axios.get('/user/12345')
    .then(function(response){
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
    });
使用 catch 時,或者傳入一個 reject callback 作為 then 的第二個引數,那麼返回的錯誤資訊將能夠被使用。

6.Axios的攔截器

你可以在請求或者返回被 then 或者 catch 處理之前對它們進行攔截。


1)、請求攔截器
axios.interceptors.request.use(
  function (config) {//config引數是請求的配置
    config.url=‘api/goodslists’;//傳送請求前,修改請求的url
    return config
  }, 
   function (error) {
    console.log('請求失敗')
    return Promise.reject(error)
  }
);

2)、響應攔截器

axios.interceptors.response.use(
function (response) {//response引數是響應物件
   response.data.unshift({“goodsid”:“商品編號”,“goodsname”:“商品名稱”,“goodsprice”:“商品價格”});//給響應的資料增加一個物件
   return response;
}, function (error) {
console.log('響應出錯')
return Promise.reject(error)

})

3)、請求的程式碼:
let vueobj = this;
axios.request({ 
method:'get',
url:'api/readers', 
params:{
"goodsid":"01002"
}
})
 .then(function (response) {
console.log(response.data);
vueobj.goodslist = response.data;
 })
 .catch(function (error) {
  console.log(error);
});

7.Ajax,jQuery ajax,axios和fetch的區別

Ajax:
       ajax自然不必說,最早出現的傳送後端請求技術,隸屬於原始js中,核心使用XMLHttpRequest物件,多個請求之間如果有先後關係的話,就會出現回撥地獄。
Jquery Ajax:
      是jQuery框架中的傳送後端請求技術,由於jQuery是基於原始的基礎上做的封裝,所以,jquery Ajax自然也是原始ajax的封裝
Fetch:
     fetch號稱是AJAX的替代品,是在ES6出現的,使用了ES6中的promise物件。Fetch是基於promise設計的。Fetch的程式碼結構比起ajax簡單多了,引數有點像jQuery ajax。但是,一定記住fetch不是ajax的進一步封裝,而是原生js。Fetch函式就是原生js,沒有使用XMLHttpRequest物件。
axios:

    axios不是原生JS的,需要進行安裝,它不帶可以在客戶端使用,也可以在nodejs端使用。Axios也可以在請求和響應階段進行攔截。同樣也是基於promise物件的。具體參照axios的概念


謝謝,加油!

相關文章