关于小程序开发的Loading问题

请问在所写的方法里调用showLoading()和hideLoading()会出现这样的错误：一直显示"Loading"。下面是代码和结果截图：

getColors(){
        // 需要展示loading效果
        wx.showLoading({
          title: 'Loading...',
        })
        wx.request({
          url: 'https://www.escook.cn/api/color',
          method :'GET',
          success :({data: res}) => {
            //   console.log(res)
            this.setData({
                // colorList:[...this.data.colorList,...res.data]
                colorList:this.data.colorList.concat(res.data)
            })
            complete: () => {
                wx.hideLoading()
              }
          }
        })
    }

Complete ()写错位置了，应该和success并级，而不是success里面。complete()在请求结束(不管成功或者失败)后调用

getColors(){
        // 需要展示loading效果
        wx.showLoading({
          title: 'Loading...',
        })
        wx.request({
          url: 'https://www.escook.cn/api/color',
          method :'GET',
          complete: () => {
                wx.hideLoading()
              },
         
          success :({data: res}) => {
            //   console.log(res)
            this.setData({
                // colorList:[...this.data.colorList,...res.data]
                colorList:this.data.colorList.concat(res.data)
            })
            }
        })
    }

getColors(){
        // 需要展示loading效果
        wx.showLoading({
          title: 'Loading...',
        })
        wx.request({
          url: 'https://www.escook.cn/api/color',
          method :'GET',
          success :({data: res}) => {
            //   console.log(res)
            this.setData({
                // colorList:[...this.data.colorList,...res.data]
                colorList:this.data.colorList.concat(res.data)
            })
            wx.hideLoading()
          }
        })
    }