axios反向代理和封裝的必要

import axios from 'axios'

mounted(){
//http://baidu.com/ajax/xxxxx在配置文件內target內容會替代ajax前面部分
axios.get(/ajax/xxxxx).then(res=>{
console.log(res.data);
})
}

根文件下配置 vue.config.js 添加以下代碼

module.exports = {
  devServer: {
    proxy: {
      '/ajax': {
        target: 'http://baidu.com',
        changeOrigin: true
      }
   
    }
  }
}

nuxt.config.js 配置文件中添加對應的模塊，並設置代理
modules: [ 
 '@nuxtjs/axios', //添加axios 
 '@nuxtjs/proxy' //添加proxy模塊  
],  
axios: 
{  proxy: true  
},  
proxy: {
   '/api': {
     target: 'http://example.com',
       pathRewrite: {
         '^/api' : '/'  
         }  
         } 
          }  
          這樣就配置好了webpack的反向代理。 
           爲了在服務端和客戶端都工作， 
           需要判斷請求  axios.get((process.server?'https://h5.ele.me':'')+"/restapi/shop......e& terminal=h5").then(res=>{ console.log(res.data)  })

目的

• 代碼封裝，重用性高，減少代碼量，減低維護難度。
• 統一處理一些常規的問題一勞永逸，如http錯誤。
• 攔截請求和響應，提前對數據進行處理，如獲取token，修改配置項。

封裝

• 在src中添加api文件，內含api.js和axios.js
• api.js統一管理接口
• axios.js進行二次封裝

設置請求超時和post請求頭

1. axios.defaults.timeout可以設置默認的請求超時時間
2. axios.defaults.heraders.post[‘Comten-type’] = ‘默認請求頭；charset=UTF -8’

請求攔截和響應攔截

• 在發送業務請求前進行阻攔，阻攔的目的是在數據發送前對數據進行一些邏輯的處理，比如統一添加token
• 拿到服務器返回給我們的數據，對數據進行一些統一的處理，這裏主要針對異常處理，如果後臺返回的狀態碼是200，則正常返回數據，如果請求失敗，那麼我們就可以根據錯誤的狀態碼類型進行一些常規的異常處理方案。

封裝post、 get 、put 、delete方法

• 對這幾個方法進行二次封裝，將url和header進行封裝，使用時調用接口函數以及傳入params。
• 定義一個get/del函數，傳遞有兩個參數，參數1url地址，參數2攜帶的請求參數。然後返回一個promise對象，請求成功時resolve服務器返回 值，請求失敗時reject錯誤。

拋出方法
vue原型註冊