目錄

• Axios的特性有：
• Axios API
• 向axios（）傳遞相關配置來創建請求；
• 常用的配置項
• axios 全局默認值的配置
• axios攔截器：在請求或響應被then或catch處理前攔截它們
• axios的快速請求方法
• onload / onprogress
• response屬性

Axios 是目前應用最為廣泛的 AJAX 封裝庫

Axios的特性有：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF
  

使用axios時，需要通過使用script標簽引入：https://unpkg.com/axios/dist/axios.min.js
axios的中文網鏈接：Axios中文網

Axios API

向axios（）傳遞相關配置來創建請求；

• axios（對象格式的配置選項）
• axios（url，config）

常用的配置項

• url：用于請求的服務器URL
• method：創建請求時使用的方法
• baseURL：傳遞相對URL前綴，將自動加在url前面
• headers：即將被發送的自定義請求頭
• params：即將與請求一起發送的URL參數
• data：作為請求主體被發送的數據
• timeout：指定請求超時的毫秒數（0表示無超時時間）
• responseType：表示服務器響應的數據類型，默認“json”

axios（）.then(function(response){
 //正常請求的響應信息對象response
})
.catch(function(error){
 //捕獲的錯誤
})

代碼展示如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
 //使用axios方法    post請求
axios({
 url:"/pinglun",
 method:"post",
 baseURL:"http://localhost:3000",
 header:{
       "Content-Type":"application/json"
 },
data:{
    "content":"well",
    "lyId":4
 },
    timeout:1000,
  }).then(function(res){
       console.log(res.data);
   }).catch(function(error){
       console.log(error);
})
 </script>

axios 全局默認值的配置

axios.defaults.baseURL = "https://xxx.xxx.com";
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencode"

axios攔截器：在請求或響應被then或catch處理前攔截它們

axios 的請求攔截器

//axios 的請求攔截器
axios.interceptors.request.use(function(config){
 //配置項config
  config.params = {
id:2 //對配置項中的params進行更改，篩選id=2
    }
   return config;//要有返回值
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function(res){
      console.log(res.data);
 })
.catch(function(error){
      console.log(error);
})
    
//axios 方法
axios("http://localhost:3000/pinglun")
.then(function (res) {
    console.log(res.data);
})
.catch(function (error) {
     console.log(error);
})
//多個axios方法也可以攔截

axios 的響應攔截器

//axios 的響應攔截器
axios.interceptors.response.use(function(response){
     return(response.data);//response里有很多值，選擇data即可
})
    
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function (res) {
      console.log(res);//response那里攔截了，已經將數據傳成data了
})
.catch(function (error) {
     console.log(error);
})

axios的快速請求方法

 axios.get(url[,config])

//axios.get(url[,config])
    
axios.get("http://localhost:3000/liuyan?id=2")
 .then(function(res){
     console.log(res.data);
})
    
axios.get("http://localhost:3000/liuyan",{
   params:{
id:1
   }
}).then(function(res){
    console.log(res.data);
})

 axios.post(url[,data[,config]])

//axios.post(url[,data[,config]]) , post請求，添加數據
axios.post("http://localhost:3000/users",{
    name:"laowang",
    age:23,
    class:1
})

 axios.delete(url[,config])

//axios.delete(url[,config])
axios.delete("http://localhost:3000/liuyan",{
   params:{
 id:5
    }
})

 axios.put(url[,data[,config]])

//axios.put(url[,data[,config]])
axios.put("http://localhost:3000/liuyan",{
    name:"wangshisan",
    id:11
})

XMLHttpRequest2.0，html5對XMLHttpRequest類型全面升級，使其變得更加易用、強大。

onload / onprogress

  XML.onload 事件：只在請求完成時觸發

  XML.onprogress 事件：只在請求進行中觸發

//xhr.onload事件：只在請求完成時觸發
//xhr.onprogress事件：只在請求進行中觸發
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
     console.log("load:",this.readyState);
};
xhr.onprogress = function(e){
    console.log("progress:",this.readyState);
    //在周期性請求過程中，接收到的數據個數
     console.log(e.loaded);
     //接收數據的總個數
     console.log(e.total);
}
xhr.send(null);

response屬性

  以對象的形式表述響應體，其類型取決于responseType的值。根據responseType的值，來通過特定的類型請求數據。

  responseType要在調用open（）初始化請求之后，在調用send（）發送請求到服務器之前設置才會有效。

//XMLHttpRequest之前的response返回
//responseText
// responseXml
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
  var data = JSON.parse(this.responseText);
  console.log(data);
   }
xhr.send(null);
   
// xhr2.0新增的response屬性 
// response
// responseType
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/liuyan");
xhr.responseType = "json";
xhr.onload = function(){
    console.log(this.response);
}
xhr.send(null)

以上就是Ajax常用封裝庫——Axios的使用的詳細內容，更多關于Ajax封裝庫Axios的使用的資料請關注其它相關文章！