Vue封裝Axios完全指南

一、Vue封裝Axios請求

Vue封裝Axios請求是指在Vue項目中，將Axios進行二次封裝，以便於在項目中快速使用和管理請求。具體步驟如下：

Step 1: 在src目錄下創建一個http.js文件用於封裝Axios。

import axios from 'axios'

axios.defaults.timeout = 10000 // http請求超時時間

axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        case 401:
          router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          })
          break
        case 403:
          Vue.toasted.error('登陸狀態已過期，請重新登錄!')
          localStorage.removeItem('userInfo')
          setTimeout(() => {
            router.replace({
              path: '/login',
              query: { redirect: router.currentRoute.fullPath }
            })
          }, 1000)
          break
        case 404:
          Vue.toasted.error('請求不存在！')
          break
      }
      return Promise.reject(error.response)
    }
  }
)

export default axios

Step 2: 在main.js中導入並配置Axios。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from './http' // 導入二次封裝的Axios

Vue.prototype.$axios = axios // 將二次封裝的Axios掛載到Vue原型上，以便於全局使用

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Step 3: 在組件中使用二次封裝的Axios。

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      this.$axios.get('/api/userList').then(res => {
        this.userList = res.data
      })
    }
  }
}

二、Vue封裝Axios所有方法

Vue封裝Axios所有方法是指在Vue項目中，將Axios的所有方法進行封裝，以便於在項目中快速使用和管理請求。具體步驟如下：

Step 1: 在src目錄下創建一個http.js文件用於封裝Axios。

import axios from 'axios'

axios.defaults.timeout = 10000 // http請求超時時間

// 封裝請求攔截器
axios.interceptors.request.use(
  config => {
    // 在發送請求前添加token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 封裝響應攔截器
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      if (response.data.code === 401) {
        // 登錄狀態失效，重新登錄
        localStorage.removeItem('token')
        window.location.href = '/'
      } else {
        return Promise.resolve(response)
      }
    } else {
      return Promise.reject(response)
    }
  },
  error => {
    return Promise.reject(error.response)
  }
)

export default {
  get(url, params) {
    return new Promise((resolve, reject) => {
      axios.get(url, { params })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  },
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios.post(url, data)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  },
  put(url, data) {
    return new Promise((resolve, reject) => {
      axios.put(url, data)
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  },
  delete(url, params) {
    return new Promise((resolve, reject) => {
      axios.delete(url, { params })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
}

Step 2: 在main.js中導入並配置Axios。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import http from './http' // 導入封裝後的Axios

Vue.prototype.$http = http // 將封裝後的Axios掛載到Vue原型上，以便於全局使用

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Step 3: 在組件中使用封裝後的Axios。

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      try {
        const res = await this.$http.get('/api/userList')
        this.userList = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}

三、Vue封裝Axios面試題

以下是一些常見的Vue封裝Axios的面試題及其答案。

1、為什麼要封裝Axios？

答：封裝Axios可以使代碼更加簡潔、優雅，提高代碼重用率和可維護性；同時也可以對請求進行統一攔截和處理，方便管理。

2、如何合理攔截Axios請求？

答：可以將請求攔截器封裝在http.js文件中，通過添加token和請求頭，對請求進行攔截和處理，同時也可以設置請求超時時間。可以將響應攔截器封裝在http.js文件中，對響應進行攔截和處理，包括登錄狀態失效、返回狀態碼等各種情況的處理。

3、怎麼在Axios中添加請求頭？

答：可以在請求攔截器中添加請求頭，具體代碼如下：

axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = 'Bearer ' + token
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

4、怎麼在Axios中上傳文件？

答：可以使用FormData，將文件封裝成一個FormData對象，通過調用post方法上傳，具體代碼如下：

let formData = new FormData()
formData.append('file', e.target.files[0])
this.$axios.post('/api/upload', formData)

四、Vue封裝Axios數據請求及調用

在Vue項目中，使用封裝好的Axios進行數據請求和調用非常簡單。我們可以在組件中調用封裝好的Axios方法，從伺服器獲取數據，以便於後續的使用和渲染。具體步驟如下：

Step 1: 在組件中調用Axios方法。

export default {
  data() {
    return {
      userList: []
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      try {
        const res = await this.$http.get('/api/userList')
        this.userList = res.data
      } catch (error) {
        console.log(error)
      }
    }
  }
}

Step 2: 在模板中渲染數據。

ID
姓名
年齡
郵箱
{{ item.id }}
{{ item.name }}
{{ item.age }}
{{ item.email }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/271982.html