uniapp接口请求了两次是怎么回事

什么是uniapp接口请求

Uniapp是一款用于开发跨平台应用的框架，可使用vue语法进行开发。接口请求是uniapp开发中必不可少的一部分，可以通过发送HTTP请求（例如GET、POST）来获取数据、更新数据等等。接口请求能够实现与后端进行数据交互，是很多应用开发的重要环节之一。

uniapp接口请求了两次的原因

1. 代码中重复调用

在uniapp开发中，有可能在代码中重复调用接口请求函数，导致接口被请求多次，进而导致接口请求了两次。以下代码就会导致接口请求两次：

// request.js中的接口请求函数
const api = (options) => {
  return uni.request({
    method: options.method || 'GET'，
    url: options.url,
    data: options.data || {},
    header: options.header || {},
    success: options.success || function () {},
    fail: options.fail || function () {}
  })
}
// 调用api函数的代码
import request from './request.js'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  created () {
    request({
      url: '/api/user',
      success: res => {
        this.userInfo = res.data
      }
    })
    request({
      url: '/api/user',
      success: res => {
        console.log(res)
      }
    })
  }
}

在上述代码中，我们在created生命周期函数中两次调用request函数，所以会出现接口请求了两次的情况。

2. 发送重复的请求

如果发送的请求与之前的请求完全相同，就会出现发送了重复的请求，导致接口请求了多次的情况。

以下代码就会导致发送重复的请求：

// request.js中的接口请求函数
const api = (options) => {
  return uni.request({
    method: options.method || 'GET'，
    url: options.url,
    data: options.data || {},
    header: options.header || {},
    success: options.success || function () {},
    fail: options.fail || function () {}
  })
}
// 调用api函数的代码
import request from './request.js'
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  created () {
    request({
      url: '/api/user',
      success: res => {
        this.userInfo = res.data
      }
    })
    request({
      url: '/api/user',
      success: res => {
        console.log(res)
      }
    })
  }
}

在此代码中，我们两次发送了相同的请求，所以会出现发送重复请求的情况，从而导致接口请求了两次。

如何解决接口请求两次的问题

针对以上两种情况，我们都可以采取以下方案来解决接口请求了两次的问题：

1. 清除重复请求

在接口请求函数中清除重复请求就可以避免发送多次相同的请求了。

let requestUrlSet = new Set()
const api = (options) => {
  let requestUrl = options.url + JSON.stringify(options.data)
  if(requestUrlSet.has(requestUrl)) {
    return Promise.reject('重复请求')
  }
  requestUrlSet.add(requestUrl)
  return uni.request({
    method: options.method || 'GET'，
    url: options.url,
    data: options.data || {},
    header: options.header || {},
    success: options.success || function () {},
    fail: options.fail || function () {
      // 请求失败也清除请求链接
      requestUrlSet.delete(requestUrl)
    },
    complete: () => {
      // 请求完成清除请求链接
      requestUrlSet.delete(requestUrl)
    }
  })
}

在以上代码中，我们使用了一个Set来存储请求链接，如果链接已经存在，说明发生了重复请求，直接返回Promise.reject。如果请求成功、失败或者完成，都需要清除相应链接，避免链接堆积、出现异常情况。

2. 防抖处理

使用防抖处理就可以避免重复调用函数，并且不会导致发送多个相同的请求。防抖技术是指在发生某个事件后，有一个wait时间的间隔，在这个时间段内发生的事件都不会触发函数的执行。在这种情况下，如果事件在wait时间内多次触发，只有最后一个事件生效。

const debounce = (fn, wait) => {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, wait)
  }
}
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  created () {
    const requestApi = () => {
      uni.request({
        url: '/api/user',
        success: res => {
          this.userInfo = res.data
        }
      })
    }
    const debounceRequestApi = debounce(requestApi, 300)
    debounceRequestApi()
    debounceRequestApi()
    debounceRequestApi()
  }
}

在以上代码中，我们定义了一个debounce函数来对接口请求函数进行防抖处理。在created生命周期函数中，我们使用了debounceRequestApi来代替requestApi函数，使得多次调用相当于调用一次，避免了重复请求。

总结

高效的接口请求是应用开发的重要环节之一，避免接口请求多次需要我们在使用过程中注意代码调用方式、及时清除重复请求、使用防抖等技术。