在Vue中,我們可以通過$api對象來進行網絡請求。$api對象是由axios實例化后封裝的對象,可以方便我們進行基于Promise的請求和攔截處理。
首先,我們需要在Vue中引入axios庫,并在Vue的原型中添加$api對象:
import axios from 'axios' Vue.prototype.$api = axios.create({ baseURL: 'https://jsonplaceholder.typicode.com', timeout: 10000 })
以上代碼認為我們將訪問https://jsonplaceholder.typicode.com這個API,并設置了請求超時時間為10秒。$api對象可以用于發送GET、POST、PUT、DELETE等請求,并且擁有axios所有的請求方法:
this.$api.get('/posts') .then(response =>console.log(response)) .catch(error =>console.log(error))
以上代碼展示了一個Get請求,我們可以通過類似的方式,發送Post、Put、Delete等請求。
除了常規請求,$api對象還可以對請求進行攔截處理。例如以下代碼展示了在請求頭中添加了Authorization參數:
this.$api.interceptors.request.use(config =>{ config.headers.Authorization = `Bearer ${localStorage.getItem('token')}` return config })
以上代碼將從LocalStorage中讀取Token,并將其添加到了請求的頭部中。
總結來說,$api是Vue中方便的網絡請求工具,并且可以對請求進行多種處理。
上一篇html字體下劃線代碼
下一篇mysql全文搜索引擎