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/n/271982.html