axios请求二次封装之避免重复发送请求

让我给你详细讲解“axios请求二次封装之避免重复发送请求”的完整攻略。

在前端开发中，我们经常使用axios这个库来进行http请求，但是如果在某个操作频繁执行时，如果频繁发送多次相同的请求，会浪费网络资源和服务器资源，可能还会造成意外的程序错误。因此，在使用axios时，我们需要进行请求二次封装，避免重复发送请求。

以下是实现这个目标的步骤：

1. 安装axios

如果还没有安装axios库，需要先在项目中安装axios库，可以使用npm或yarn命令来实现：

npm install axios --save
# 或
yarn add axios

2. 创建axios实例

我们可以使用axios创建实例，然后设置一些默认的请求参数，方便后续的调用。

例如：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://www.example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxxxxxxxxxxxxxx'
  }
})

3. 封装请求函数

我们可以在应用中封装通用的请求函数，用于向后端服务器发送http请求，因此，我们需要在这里进行请求二次封装，避免重复发送请求。

例如，可以创建一个get请求函数：

let requestList = []

export function getRequest(url, params) {
  // 避免重复发送请求
  if (requestList.includes(url)) {
    return Promise.reject(new Error(`${url} is loading...`))
  }

  // 添加当前请求url到请求列表中
  requestList.push(url)

  return instance.get(url, {
    params: params
  }).then(res => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.resolve(res.data)
  }).catch(error => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.reject(error)
  })
}

在这个请求函数中，我们使用了一个数组requestList记录当前正在进行的请求URL，避免了重复发送请求，以及做了出错时的错误处理和移除请求URL的操作。

4. 调用请求函数

现在，我们可以在应用中使用这个二次封装的请求函数，发送http请求了。

例如，上面的getRequest函数，我们可以这样调用：

getRequest('/users', { page: 2 })
  .then(data => {
    console.log(data)
  }).catch(error => {
    console.error(error)
  })

示例

实际开发中，我们可能需要对多个请求进行二次封装，以避免重复发送请求。请看下面的一个示例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://www.example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxxxxxxxxxxxxxx'
  }
})

let requestList = []

export function getRequest(url, params) {
  // 避免重复发送请求
  if (requestList.includes(url)) {
    return Promise.reject(new Error(`${url} is loading...`))
  }

  // 添加当前请求url到请求列表中
  requestList.push(url)

  return instance.get(url, {
    params: params
  }).then(res => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.resolve(res.data)
  }).catch(error => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.reject(error)
  })
}

export function postRequest(url, data) {
  // 避免重复发送请求
  if (requestList.includes(url)) {
    return Promise.reject(new Error(`${url} is loading...`))
  }

  // 添加当前请求url到请求列表中
  requestList.push(url)

  return instance.post(url, data).then(res => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.resolve(res.data)
  }).catch(error => {
    // 从请求列表中移除当前请求url
    requestList.splice(requestList.indexOf(url), 1)

    return Promise.reject(error)
  })
}

在这个示例中，我们封装了两个请求函数getRequest和postRequest，分别用于进行GET和POST请求。

这是一个入门级别的请求二次封装的攻略，你可以在实际开发中按照实际需求进行进一步的优化和封装。