uniapp vue3 后端接口请求带token封装

在uniapp中，我们可以使用uni.request()方法来请求后端接口。为了在请求中带上token，我们可以先在本地存储中获取token，然后将其放在请求头中。

以下是一个简单的封装示例：

import store from '@/store' // 引入vuex实例

const baseUrl = 'http://your.api.url' // 接口基础路径

// 封装请求方法
export const request = (options) => {
  // 获取token
  const token = store.state.token
  
  // 设置默认请求头
  const header = {
    'Content-Type': 'application/json'
  }
  
  // 如果存在token，则将其放在请求头中
  if (token) {
    header.Authorization = `Bearer ${token}`
  }
  
  // 发起请求
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header,
      success: (res) => {
        resolve(res.data)
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

在上面的示例中，我们在请求头中设置了一个Authorization字段，并将token放在其中。在需要发送带有token的请求时，我们只需要调用上面封装的request方法即可。

import { request } from '@/utils/request'

// 发送带有token的请求
request({
  url: '/user/info',
  method: 'GET'
}).then(res => {
  console.log(res)
})

这样就可以方便地在uniapp中发送带有token的请求了。