首页 › 教程频道› 经验杂谈 › 查看内容

Vue中对axios进行封装的最佳实践

作者：模板之家 2023-6-9 16:08 129人关注

Vue是当前前端开发中最常用的框架之一，而Ajax请求又是前端开发中非常关键的一环。为了方便开发者使用，Vue社区中出现了许多对Ajax请求库axios进行封装的实践。本文将介绍Vue中对axios进行封装的最佳实践，帮助您更 ...

Vue是当前前端开发中最常用的框架之一，而Ajax请求又是前端开发中非常关键的一环。为了方便开发者使用，Vue社区中出现了许多对Ajax请求库axios进行封装的实践。本文将介绍Vue中对axios进行封装的最佳实践，帮助您更好地理解如何在Vue项目中使用axios。

封装axios

在Vue项目中，我们需要把axios进行封装以方便使用。这里介绍一个标准的axios封装：

import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  timeout: 10000, // 请求超时时间
  baseURL: process.env.VUE_APP_BASE_API // api请求的baseURL
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 发送请求前进行token鉴权
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + store.getters.token
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      // 抛出异常信息
      return Promise.reject(new Error(res.message || '错误'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error)
    if (error.response.status === 401) {
      // 跳转到登录页
      router.push({ path: '/login' })
    }
    return Promise.reject(error)
  }
)

export default service

登录后复制

上述代码创建了一个axios实例，并对其进行了request和response拦截器的配置。在request拦截器中，我们可以通过store获取用户token，并将其添加到请求头中进行鉴权。在response拦截器中，我们处理了服务器响应异常和未授权的请求，以及对返回数据的处理。

对http请求进行封装

在使用axios时我们通常需要对http请求进行进一步的封装以便于进行统一管理。下面我们为各种http请求创建一个封装。

get请求：

import http from '@/utils/http'

export default {
    get(url, params) {
        return http.get(url, {
            params: params
        })
    }
}

登录后复制

post请求：

import http from '@/utils/http'

export default {
    post(url, data) {
        return http.post(url, data)
    }
}

登录后复制

delete请求：

import http from '@/utils/http'

export default {
    delete(url) {
        return http.delete(url)
    }
}

登录后复制

put请求：

import http from '@/utils/http'

export default {
    put(url, data) {
        return http.put(url, data)
    }
}

登录后复制

通过以上的封装，我们可以在使用http请求时直接调用对应的方法即可。

在Vue项目中使用

在Vue项目中使用封装的axios和http请求，需要进行以下操作：

首先，我们需要在main.js文件中引入axios和封装好的http请求：

import axios from 'axios'
import http from '@/utils/http'

Vue.prototype.$axios = axios
Vue.prototype.$http = http

登录后复制

其次，在组件中使用：

import api from '@/api/api'

export default {
  name: 'Demo',
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {
        // 请求参数
      }
      api.get('/data', params).then(res => {
        console.log(res)
        this.dataList = res.data
      })
    }
  }
}

登录后复制

这里我们将api封装的http请求引入，并在mounted生命周期中调用getData方法发起http请求，最终将结果展示在页面中。