uniapp使用vue3封装一个请求公用方法

以下是使用Vue3封装一个请求公用方法的示例代码：

// 引入封装的uni.request请求方法
import { request } from '@/utils/request.js';

// 封装公共请求接口方法
export const request = ({ url, data = {}, method = "get" }) => {
  // 请求前加载 最后在请求后隐藏
  uni.showLoading({
    title: "拼命加载中..."
  })

  // Promise
  return new Promise((resolve, reject) => {
    uni.request({
      url: baseURL + url,
      data,
      method,
      timeout: 6000,
      success: (res) => {
        resolve(res.data) // 请求成功返回的数据
      },
      fail: (err) => {
        reject(err) // 请求失败返回的消息
      },
      complete() {
        uni.hideLoading() // 请求完做的事
      }
    })
  })
};

相关问题

uniapp Vue3版本 封装一个请求并注册引入

可以使用axios库来封装请求，并在Vue3中进行注册引入。首先在src文件夹下创建一个api文件夹，然后在其中创建一个request.js文件，编写如下代码：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://xxx.xxx.xxx.xxx:xxxx' // 修改为自己的接口地址
})

// 封装get请求
function get(url, params) {
  return instance.get(url, {
    params
  })
}

// 封装post请求
function post(url, data) {
  return instance.post(url, data)
}

export {
  get,
  post
}

接下来在src文件夹下的main.js文件中引入并注册：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { get, post } from './api/request'

const app = createApp(App)

app.config.globalProperties.$get = get
app.config.globalProperties.$post = post

app.use(store).use(router).mount('#app')

现在就可以在组件中直接使用this.$get或this.$post进行请求了。

uniapp ts vue3封装请求拦截

好的，关于uniapp ts vue3封装请求拦截，你可以按照以下步骤进行：

1. 在src目录下创建一个utils文件夹，并在该文件夹下创建一个request.ts文件，用于封装请求拦截器。

2. 在request.ts文件中引入axios和qs，并创建一个axios实例，具体代码如下：

import axios from 'axios';
import qs from 'qs';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 后端接口地址
  timeout: 5000 // 请求超时时间
});

service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    if (config.method === 'post') {
      config.data = qs.stringify(config.data);
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    console.log(error); // for debug
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

3. 在需要使用请求拦截器的页面中，引入刚才创建的request.ts文件，并使用相关方法进行请求，具体代码如下：

import request from '@/utils/request';

export function login(data: any) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  });
}

这样就完成了uniapp ts vue3封装请求拦截的过程。