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

提綱：

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的 請求配置和響應資料格式

//`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的概念

謝謝，加油！