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

來源:互聯網
上載者:User
提綱:

Axios的概念 安裝 Axios簡單樣本 Axios的API Axios的請求配置和響應資料格式 Axios的攔截器 Ajax,jQuery ajax,axios和fetch的區別 內容:

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


謝謝,加油。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.