當我們使用Vue進行網絡請求的時候,我們需要想辦法把一些自定義的頭部信息加到HTTP的請求中。這個時候,我們可以使用axios這個插件來進行網絡請求。
// 引入axios import axios from 'axios' // 創建axios實例 const instance = axios.create({ baseURL: 'http://localhost:3000', timeout: 10000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) // 添加請求攔截器 instance.interceptors.request.use( config =>{ // 在請求頭中添加token config.headers.Authorization = `Bearer ${localStorage.getItem('token')}` return config }, error =>{ return Promise.reject(error) } ) // 發送請求 instance.get('/api/users').then(response =>{ console.log(response) })
我們來看一下上面的代碼。首先,我們引入了axios插件,并且使用axios.create()方法創建了一個axios實例。在這個實例中,我們設置了基本的請求URL,請求的超時時間以及請求頭中默認的Content-Type和編碼方式。
在實例中,我們還添加了一個請求攔截器(interceptors.request),這個攔截器可以在請求發出之前對請求進行處理,比如可以在請求頭中添加一些自定義的信息。
在上面的代碼中,我們在請求頭Authorization字段中添加了一個token,這個token是從localStorage中獲取的。我們可以根據自己的需求在請求頭中添加任何想要添加的字段。
最后,我們通過instance.get()方法發送了一個GET請求,并且在請求的回調函數中輸出了響應的結果。
還有一種情況,可能是我們需要對每次請求的請求頭進行動態修改,而不是像上面那樣在請求攔截器中添加一個固定的token。這個時候,我們可以直接在發送請求時傳入一個配置對象,來動態修改請求頭。
// 發送請求 instance.get('/api/users', { headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` } }).then(response =>{ console.log(response) })
在上面的代碼中,我們通過傳入一個配置對象的方式來動態修改請求頭。在這個配置對象中,我們可以修改請求頭的任何字段,并且這個修改是針對當前的請求有效。
總結起來,當我們需要在Vue中進行網絡請求并且需要自定義請求頭信息的時候,我們可以使用axios這個插件,并且在創建axios實例時添加請求攔截器或者在發送請求時傳入一個配置對象,來動態地修改請求頭信息。