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: 在模板中渲染数据。

五、Vue封装Axios和开启代理

在Vue项目中，为了避免跨域问题，我们可以通过使用Webpack的proxyTable来开启代理，从而实现对服务器的请求。具体步骤如下：

Step 1: 在config目录下的index.js中配置proxyTable。

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/mock' // 将所有以/api开头的请求代理到本地mock目录
        }
      }
    }
    ...
  }
}

Step 2: 在组件中使用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封装组件

Vue组件化开发是其最重要的特性之一。在项目中，我们可以将一些通用的组件进行封装，以便于复用和管理。具体步骤如下：

Step 1: 创建一个组件。

   

<script>
export default {
  data() {
    return {
      keyword: '',
      dataList: []
    }
  },
  methods: {
    search() {
      this.dataList = ['apple', 'banana', 'orange'].filter(item => item.indexOf(this.keyword) !== -1)
    }
  }
}
</script>

Step 2: 在组件外部引用。

   

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    'MyComponent': MyComponent
  }
}
</script>

七、Vue封装表格组件

表格是Web开发中最常用的组件之一。我们可以封装一个通用的表格组件，用于在Vue项目中快速地渲染表格数据。具体步骤如下：

Step 1: 创建一个表格组件。

   

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

Step 2: 在父组件中使用表格组件。