vue axios接口请求封装方式

下面是关于Vue中Axios接口请求封装的完整攻略。

1. 为什么要封装Axios请求

Vue中Axios是一个非常流行的HTTP请求库，它可以实现异步数据的请求，并且可以在各个组件中使用，非常方便。但是，在实际开发中，由于请求的参数较多，请求方式较为复杂，并且需要对请求结果进行处理，所以，在大型项目中需要封装Axios请求方式，以便于更好地维护和管理代码。

2. 封装Axios请求的步骤

2.1 创建实例

在Vue中使用Axios请求时，需要先创建一个Axios实例。实例化一个Axios对象，可以设置一些默认的请求参数，如请求方式、请求地址前缀、请求头等。

// src/utils/request.js

import axios from 'axios'

const service = axios.create({
  baseURL: '', // 请求地址前缀
  timeout: 5000 // 超时时间
})

export default service

2.2 对Axios方法进行封装

在实际开发中，我们往往需要对请求方法进行封装，以便于在任何地方都能够使用不同的请求方式等参数进行请求，并且对请求结果进行处理。

// src/utils/request.js

import axios from 'axios'
import { Message } from 'element-ui'

// 创建一个axios对象
const service = axios.create({
  baseURL: '', // 请求地址前缀
  timeout: 5000 // 超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    // 请求错误处理
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果状态码不是20000，则说明请求失败
    if (res.code !== 20000) {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

在这个例子中，我们对Axios的请求拦截器和响应拦截器进行了封装。在请求拦截器中，我们可以进行一些请求前的操作，比如添加请求头等。在响应拦截器中，对请求结果进行了处理，如果请求失败，我们可以进行相应的提示，并返回Promise.reject(new Error(res.message || 'Error'))。

2.3 在Vue中使用

在Vue中使用Axios，通常是在组件中进行请求。在组件中引入之前封装好的axios对象，并调用Axios对象中的方法进行请求。

// src/components/Example.vue

<template>
  <div class="example">
    <div>{{info}}</div>
    <el-button @click="getData">点击获取数据</el-button>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Example',

  data () {
    return {
      info: ''
    }
  },

  methods: {
    async getData () {
      const res = await request.get('/api/data') // 发送GET请求
      this.info = res.data // 获取响应数据
    }
  }
}
</script>

这是一个简单的Vue组件，当点击按钮时，会通过Axios发送一个GET请求，请求的接口地址为/api/data。接口返回的数据会更新显示在页面中。

2.4 封装Axios实例中的请求方法

在实际开发中，我们往往需要发送多种请求方式的接口，例如GET、POST、PUT、DELETE等。因此，我们需要对Axios实例中的每一种请求方法都进行一次封装。

// src/utils/request.js

import axios from 'axios'
import { Message } from 'element-ui'

// 创建一个axios对象
const service = axios.create({
  baseURL: '', // 请求地址前缀
  timeout: 5000 // 超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 请求前的操作
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果状态码不是20000，则说明请求失败
    if (res.code !== 20000) {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default {

  get: (url, params) => {
    return service.get(url, {
      params: params
    })
  },

  post: (url, data) => {
    return service.post(url, data)
  },

  put: (url, data) => {
    return service.put(url, data)
  },

  delete: (url, data) => {
    return service.delete(url, data)
  }
}

在这个例子中，我们在封装的Axios实例中添加了get、post、put和delete四种请求方式的封装，以便于在组件中调用这些方法进行请求。

2.5 在 Vue 中使用封装的axios请求

在组件中调用Axios封装的请求方法进行请求。

// src/components/Example.vue

<template>
  <div class="example">
    <div>{{info}}</div>
    <el-button @click="getData">点击获取数据</el-button>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Example',

  data () {
    return {
      info: ''
    }
  },

  methods: {
    async getData () {
      const params = {
        type: 'info'
      }
      const res = await request.get('/api/data', params) // 发送GET请求
      this.info = res.data // 获取响应数据
    }
  }
}
</script>

3. 两个封装Axios请求实例

3.1 发送带有请求参数以及请求头的POST请求

在实际开发中，我们往往需要在请求头中添加一些额外的信息，比如用户身份信息、请求时间、请求版本等。这些信息通常放在Header中。

// src/utils/request.js

import axios from 'axios'
import { Message } from 'element-ui'

// 创建一个axios对象
const service = axios.create({
  baseURL: '', // 请求地址前缀
  timeout: 5000, // 超时时间
  headers: { // 默认添加的请求头信息
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 自定义请求头信息
    Object.assign(config.headers, {
      version: '1.0.0', // 请求版本
      token: localStorage.getItem('token') // 用户身份信息
    })
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果状态码不是20000，则说明请求失败
    if (res.code !== 20000) {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default {

  get: (url, params) => {
    return service.get(url, {
      params: params
    })
  },

  post: (url, data) => {
    return service.post(url, data, {
      headers: { // 单独设置请求头
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      }
    })
  },

  put: (url, data) => {
    return service.put(url, data)
  },

  delete: (url, data) => {
    return service.delete(url, data)
  }
}

在这个例子中，我们配置了默认请求头信息和自定义请求头信息，并且在发送POST请求时，添加了一个额外的请求头信息。

3.2 对请求结果进行缓存

在实际开发中，有些接口的数据不会经常发生变化，可能每天或者几天才会更新一次。这种情况下，我们可以将请求结果进行缓存，避免重复请求，减少服务器压力。

// src/utils/request.js

import axios from 'axios'
import { Message } from 'element-ui'

// 缓存列表
const cache = {}

// 创建一个axios对象
const service = axios.create({
  baseURL: '', // 请求地址前缀
  timeout: 5000 // 超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 如果状态码不是20000，则说明请求失败
    if (res.code !== 20000) {
      Message({
        message: res.message || 'error',
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default {

  get: (url, params, cacheFlag) => { // 带有缓存标记的GET请求
    if (cacheFlag && cacheFlag === true && cache[url]) { // 如果有缓存数据，则直接返回缓存数据
      return Promise.resolve(cache[url])
    } else {
      return service.get(url, {
        params: params
      }).then(response => {
        if (cacheFlag && cacheFlag === true) { // 如果有缓存标记，则将响应结果添加到缓存列表中
          cache[url] = response
        }
        return response
      })
    }
  },

  post: (url, data) => {
    return service.post(url, data)
  },

  put: (url, data) => {
    return service.put(url, data)
  },

  delete: (url, data) => {
    return service.delete(url, data)
  }
}

在这个例子中，我们添加了一个cache变量，并将请求结果进行缓存。在发送GET请求时，可以添加一个cacheFlag的标记，表示是否需要缓存请求结果。如果需要缓存，则将响应结果添加到缓存列表中。在下一次请求时，如果缓存列表中存在相应的缓存数据，就不必再次发送请求，直接返回缓存数据。

4. 结语

以上就是Vue中封装Axios请求的完整攻略，希望对大家有所帮助。在实际开发中，Axios请求的封装方式非常灵活，根据实际业务需求进行不同封装方式的选择，可以更好地提高代码的可读性和可维护性。