完整過一遍axios，再也不怕寫請求

axios請求方法

主要有get，post，put，patch，delete

• get

  獲取資料

• post

  提交資料（表單提交+檔案上傳）

• put

  更新資料（將所有資料均推放到服務端）

• patch

  更新資料（只將修改的資料推送到後端）

• dlelete

  刪除資料

get方法

寫法

呼叫型

 axios.get('/data.json').then((res)=>{
      console.log(res)
    })
複製程式碼

axios()型

axios({
  method:'get',
  url:'/data.json'
}).then((res)=>{
     console.log(res)
})
複製程式碼

params

如果我們需要載入 : http://localhost:8080/data.json?id=12,應該如何去獲取呢？

呼叫型

axios.get('/data.json',{
      params:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })
複製程式碼

axios()方法型

axios({
  method:'get',
  url:'/data.json',
  params:{
    id:12
  }
}).then((res)=>{
     console.log(res)
})
複製程式碼

post方法

寫法

呼叫型

axios.post('/post',{},config)
複製程式碼

post方法有三個引數，分別是url、資料、config。config引數暫時不討論。

一般上傳的資料分兩種

• form-data 表單提交（圖片上傳、檔案上傳）
• application/json
• 以上兩種資料，都可以在請求發起後，進入瀏覽器network檢視請求頭中的content-type進行檢視

假設我們現在要上傳一個數據：

let data = { id:12 }

那麼我們可以直接將其傳入：

axios.post('/post',data).then((res)=>{
  console.log(res)
})
複製程式碼

axios()方法型

axios({
  method:'post',
  url:'/post',
  data:data
}).then(...)
複製程式碼

兩種資料的小細節

當我們上傳的是一個一般的let data = { id:12 }資料時，Network的請求頭裡會顯示為：application/json；charset=UTF-8

當我們上傳的是：

let data = {id:12}
let formData = new FormData()
for(let key in data){
      formData.append(key,data[key])
    }
複製程式碼

這裡將data轉格式了，格式變為formdata形式。

那麼Network的請求頭裡會顯示為：multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw

put方法和patch方法

形式與post方法大體相同，Network顯示僅Request Method不同。

delete方法

寫法

url刪除法

//直接從url裡面刪除
axios.delete('/data.json',{
      params:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })
複製程式碼

從url刪除，Network請求頭最後面會顯示為：Query String Parameters

請求體刪除法

axios.delete('/data.json',{
      data:{
        id:12
      }
    }).then((res)=>{
      console.log(res)
    })
複製程式碼

從請求體裡刪除，Network請求頭最後面會顯示為：Request Payload

兩種方法的刪除方式是不同的，具體使用需要和後端溝通。

併發請求

簡介

同時進行多個請求，並統一處理返回值。

案例：假設有一個聊天工具，同時有你的聊天記錄和個人資訊。此時需要呼叫兩個介面去請求資料。此時需要統一處理他們的返回值。

axios提供的方法：all、spread

axios.all方法接受一個數組作為引數，陣列中的每個元素都是一個請求，返回一個promise物件，當陣列中所有請求均已完成時，執行then方法。 在then方法中執行了 axios.spread 方法。該方法是接收一個函式作為引數，返回一個新的函式。接收的引數函式的引數是axios.all方法中每個請求返回的響應。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((acct, perms) => {
    // 兩個請求都完成後,acct是getUserAccount的返回值，同理，perms是 getUserPermissions的返回值
  }));
複製程式碼

axios例項簡介

為什麼要用例項？

當我們需要用到不同的後端域名，直接呼叫axios.get並不太方便。我們可以用建立例項的方式去呼叫，不同的域名用不同的例項一一對應。

表現形式

 created() {
     let instance = axios.create({
       baseURL:'http://localhost:8080',//基本請求路徑
       timeout:1000,//超時設定
     })
     instance.get('/data.json').then(res=>{
        console.log(res)
     })
   }
複製程式碼

基本配置方法

       baseURL:'http://localhost:8080',//請求的域名、基本地址
       timeout:1000,//請求超時時長（ms）
       url:'/data.json',//請求路徑
       method:'get，post，put，patch,delete',//請求方法
       headers:{
         token:''//代表當前登陸人的身份資訊
       },//設定請求頭
       params:{},//將請求引數拼接在url上，是一個物件
       data:{}//將請求引數放在請求體裡，是一個物件
複製程式碼

其中，params和data表現形式為物件。

使用場景通常是發起請求時，順帶傳送引數：

 //以get請求為例，get有兩個配置，分別是相對路徑和config
 axios.get('/data.json',{
  params:{
     //引數
  }
 })
複製程式碼

引數配置方法

1.全域性配置

 axios.defaults.基本配置方法（baseurl等）
 如：
 axios.defaults.timeout = 1000 //全域性配置請求時長1s
複製程式碼

2.例項配置

 let instance = axios.create(
   //基本配置方法
 )
複製程式碼

如果設定了全域性的配置方法，而例項配置中沒有設定相應的方法，則延用全域性的方法，否則，以例項中的方法為主。

3.axios請求配置

視具體情況而定，如呼叫某個路徑的檔案巨大，我們可以單獨對其請求時長進行設定：

 instance.get('/data.json',{
   timeout:5000
 })
複製程式碼

總結

優先順序：請求配置 > 例項配置 > 全域性配置

攔截器

在發起請求前做一些處理，再發起請求後再做一些處理。

分為請求攔截器和響應攔截器

請求攔截器

 axios.interceptors.request.use(
   config=>{
     //在傳送請求前做些什麼
     return config
   },
   err=>{
     // 在請求錯誤的時候做些什麼（此處錯誤，請求沒有到後端）
     return Promise.reject(err)//這裡返回一個promise物件
   }
 )
複製程式碼

響應攔截器

 axios.interceptors.responce.use(
   res=>{
      //請求成功對響應資料進行處理
      return res
   },err=>{
      //響應錯誤做些什麼（此處錯誤，到達後端後返回）
      return Promise.reject(err)
   }
 )
複製程式碼

兩者都在響應錯誤後進行了promise物件的返回，具體的作用是什麼呢？

 axios.get().then().catch(err=>{})
複製程式碼

這一段程式碼是我們平時傳送get請求時的標準形態，then會執行請求成功後的操作，catch用來捕獲錯誤。

我們前面攔截響應後，無論是請求還是響應的攔截器，他們的err返回的promise都會進入catch中。

取消攔截器（瞭解即可）

 let inerceptors = axios.interceptors.request.use
 (config=>{
      config.header = {
          auth:true
      }
      return config
 })
 axios.inerceptors.request.eject(interceptors) //用axios全域性去呼叫interceptors，這樣就取消攔截了。。。
複製程式碼

舉個栗子

通過攔截器控制登陸狀態

 // 登陸狀態,有token
 let request = axios.create({})
 request.interceptors.request.use
 (config => {
    config.headers.token = ''
    return config
 })
 // 非登陸狀態，無token 
 let request2 = axios.create({})
複製程式碼

有token的可以訪問更多，get更多的資料，無token則不行。類似於評論需要登陸

錯誤處理

表現形式

 //首先設定攔截器
 axios.interceptors.request.use(
  config =>{
    return config
  },err =>{
    return Promise.reject(err)
  }
 )
 axios.interceptors.response.use(
  res =>{
    return res
  },err =>{
    return Promise.reject(err)
  }
 )
 ​
 //錯誤的獲取
 axios.get('/data.json').then(res=>{
   console.log(res)
 }).catch(err =>{
   console.log(err) //所有錯誤處理都會進入此處
 })
複製程式碼

具體的實踐過程中，我們需要建立一個統一的錯誤處理，將所有的錯誤型別都放在攔截其中，方便我們後面呼叫介面時使用。

栗子

 //建立一個請求例項
 let instance = axios.create({})
 //為請求例項新增請求攔截器
 instance.interceptors.request.use(
  config =>{
    return config
  },err =>{
  //請求錯誤 一般http狀態碼以4開頭，常見：401超時，404 not found 多為前端瀏覽器錯誤
     return Promise.reject(err)
  }
 )
 instance.interceptors.response.use(
   res=>{
     return res
   },err =>{
     //響應錯誤,一般http狀態碼以5開頭，500系統錯誤，502系統重啟等，偏向於服務端返回的報錯
     return Promise.reject(err)
   }
 )
 ​
 //使用
 instance.get('data').then(res=>{
    console.log(res)
 }).catch(err =>{
     console.log(err)
 })
複製程式碼

取消請求

用於取消正在進行的http請求，比較少用到，就不做介紹了

最後