vue 封装Axios详细代码说明

在Vue项目中使用Axios来进行网络请求是很常见的，如果我们每次都直接调用axios的API来进行请求的话，不仅代码重复度高，而且还会影响代码的可维护性。因此，我们可以通过封装一个Axios请求的工具类，来优化我们的代码。

以下是使用Vue2.x版本进行Axios请求封装的详细步骤及代码：

1. 安装Axios

在开始之前，我们需要先安装和引入Axios，这里我们可以通过npm或yarn来进行安装。在项目中统一引入Axios，建议在main.js中进行引入：

import axios from 'axios'
Vue.prototype.axios = axios

2. 封装请求工具类

在src目录下新建network文件夹，并在其中新建request.js文件，用来封装Axios请求的工具类。具体代码如下：

import axios from 'axios'

axios.defaults.baseURL = 'api' // 配置请求的根路径

export default function request (options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: options.baseURL || '',
      headers: options.headers || {},
      timeout: options.timeout || 60000
    })
    
    instance(options)
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

以上代码我们封装了一个request函数，它接收一个参数options，options是一个对象，包含以下属性：

• url：请求的URL地址
• method：请求的方法，例如get、post等
• data：请求的数据
• headers：请求头信息
• timeout：超时时间

该函数内部使用了Axios的create方法创建一个axios实例，并配置基础URL、请求头和超时时间等。然后通过实例调用Axios的API，最终返回一个Promise对象，实现了异步请求的目的。

3. 在Vue组件中使用封装工具类进行请求

在Vue组件中使用上述封装的工具类进行请求非常简单，如下所示：

import request from '@/network/request.js'

export default {
  methods: {
    handleRequest () {
      request({
        url: '/product',
        method: 'get'
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

在Vue组件中导入我们封装的request函数，并在需要的方法中调用即可。

以上就是在Vue项目中封装Axios的请求工具类的详细说明及代码。

同时对于请求的过滤和拦截等处理，也可以进行深度的定制和扩展

扩展

好的，以下是针对Vue项目中封装Axios请求的详细说明和代码，包括请求过滤和响应拦截的使用：

1. 请求过滤

请求过滤指的是在发送请求之前对请求进行一些处理，例如在请求头中添加一些通用信息，或者对请求参数进行加密等。在Vue项目中使用Axios进行请求过滤，可以通过在请求拦截器中来处理。以下是一个请求拦截器的示例代码：

import axios from 'axios'

axios.interceptors.request.use(
  function(config) {
    // 在请求发出之前进行处理
    config.headers.Authorization = 'Bearer ' + getToken()
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

在以上代码中，我们使用了Axios的interceptors属性，通过request.use方法来注册了一个请求拦截器。在拦截器的回调函数中，我们可以对请求配置进行修改，并返回一个新的配置对象来实现请求过滤。在该示例中，我们对请求的头信息添加了一个Authorization属性，并通过函数getToken()来获取对应的token信息。

2. 响应拦截

响应拦截指的是在接收到服务器响应之后对响应进行一些处理，例如进行数据解密、对响应进行统一的处理等。在Vue项目中使用Axios进行响应拦截，可以通过在响应拦截器中来处理。以下是一个响应拦截器的示例代码：

import axios from 'axios'

axios.interceptors.response.use(
  function(response) {
    // 对响应数据做些事情
    return response.data
  },
  function(error) {
    // 对请求错误做些事情
    return Promise.reject(error)
  }
)

在以上代码中，我们同样使用了Axios的interceptors属性，通过response.use方法来注册了一个响应拦截器。在拦截器的回调函数中，我们可以对响应数据进行处理，并返回一个新的数据来实现响应拦截。在该示例中，我们简单地将响应数据中的data属性返回，以获得响应的数据信息。

3. 使用封装的Axios请求

在对Axios进行请求过滤和响应拦截的代码封装完成之后，我们就可以将其应用于Vue项目中使用。以下是一个使用封装的Axios请求的示例代码：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

instance.interceptors.request.use(
  function(config) {
    // 在请求发出之前进行处理
    config.headers.Authorization = 'Bearer ' + getToken()
    return config
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

instance.interceptors.response.use(
  function(response) {
    // 对响应数据做些事情
    return response.data
  },
  function(error) {
    // 对请求错误做些事情
    return Promise.reject(error)
  }
)

export default {
  get: function(url, params) {
    return instance.get(url, {
      params: params
    })
  },
  post: function(url, data) {
    return instance.post(url, data)
  },
  upload: function(url, formData) {
    return instance.post(url, formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }
}

在以上代码中，我们首先使用Axios的create方法创建了一个实例instance，并在该实例中配置了请求的基础URL和超时时间。接着，我们通过instance的interceptors属性来注册了请求和响应的拦截器，并在拦截器函数中进行相应的处理。最后，我们通过导出一个对象来对包括GET、POST和上传文件等请求进行了封装，使得请求的调用变得十分简洁和方便。

至此，我们已经完成了在Vue项目中封装Axios请求的代码，同时加入了请求过滤和响应拦截的处理，使得请求更加安全和可靠。