axios用法總結

一、axios的優點

• 基於promise用於瀏覽器和node.js的http客戶端
• 支持瀏覽器和node.js
• 支持promise
• 能攔截請求和響應
• 自動轉換JSON數據
• 能轉換請求和響應數據

二、axios基礎用法

• get和 delete請求傳遞參數
  • 通過傳統的url 以 ? 的形式傳遞參數
  • restful 形式傳遞參數
  • 通過params 形式傳遞參數
• post 和 put 請求傳遞參數
  • 通過選項傳遞參數，返回的數據爲json格式。
  • 通過 URLSearchParams 傳遞參數 ，返回的爲表單形式的數據。（id=1&name=lin）

• axios請求方法 的返回值均爲一個Promise對象，可以使用async/await進行簡化操作，這樣更方便。

    # 1. 發送get 請求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一個對象      所有的對象都存在 ret 的data 屬性裏面
      // 注意data屬性是固定的用法，用於獲取後臺的實際數據
      // console.log(ret.data)
      console.log(ret)
    })
	# 2.  get 請求傳遞參數
    # 2.1  通過傳統的url  以 ? 的形式傳遞參數
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式傳遞參數 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通過params  形式傳遞參數 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })


	#3 axios delete 請求傳參     傳參的形式和 get 請求一樣
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 請求
    # 4.1  通過選項傳遞參數，直接一個對象。返回的數據爲json格式。
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通過 URLSearchParams  傳遞參數 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 請求傳參   和 post 請求一樣 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

三、axios 全局配置

#  配置公共的請求頭 
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超時時間
axios.defaults.timeout = 2500;
#  配置公共的請求頭
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

四、axios 攔截器

• 請求攔截器
  • 請求攔截器的作用是在請求發送前進行一些操作
    • 例如在每個請求體里加上token，統一做了處理如果以後要改也非常容易
• 響應攔截器
  • 響應攔截器的作用是在接收到響應後進行一些操作
    • 例如在服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁

	# 1. 請求攔截器 
	axios.interceptors.request.use(function(config) {
	  # config 爲請求對象
      console.log(config.url)
      # 1.1  任何請求都會經過這一步   在發送請求之前做些什麼   
      config.headers.mytoken = 'nihao';
      # 1.2  這裏一定要return   否則配置不成功  
      return config;
    }, function(err){
       #1.3 對請求錯誤做點什麼    
      console.log(err)
    })
	#2. 響應攔截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收響應做些什麼  
      var data = res.data;
      return data;
    }, function(err){
      #2.2 對響應錯誤做點什麼  
      console.log(err)
    })

---

如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~

博主主頁 Poetic Code