对 uni.request 的封装

• 在根目录创建一个 api 文件夹 ，并创建 api.js 以及 request.js
• api.js 是对于所有 请求接口 api 地址 的存放

api.js 代码

	const BASE_URL = "http://127.0.0.1:8080/api/";
	
	export { BASE_URL }

requset.js 代码

	// API 封装
import * as api from "./api.js";
function request({
  url = "",
  data = {  },
  method = "POST",
  dataType = "json",
  successCb = null, // 成功回调
  failCb = null, // 失败回调
} = {}) {
  uni.request({
    //请求路径
    url: api.BASE_URL + url,
    // 参数
    data,
    // 请求方式
    method,
    // 超时时间
    timeout: 30000,
    // 一般直接写dataType:‘json’，
    dataType,
    // 设置请求头 
    header: {
      token: uni.getStorageSync("token") || "",
    },
    success: (res) => {
    
    //  可以根据自己需求  根据 code 进行拦截
      if (res.statusCode === 200 && res.data.code === 1) {
        // 需要成功回调时才调用
        successCb && successCb(res.data.data);
      } else {
        // 请求成功  业务失败
         uni.showToast({
           title: "请求失败",
           icon: "none",
           duration: 2000,
         });
      }
    },
    // 请求失败
    fail(err) {
      uni.showToast({
        title: "请求失败",
        icon: "none",
        duration: 2000,
      });
      //   需要失败回调时才调用
      failCb && failCb();
    },
  });
}
// 导出 request
export default request;

页面使用

<script>
import request from "../../api/request";
import * as api from "../../api/api";

    export default {
        data() {
            return {
            }
        },
        methods: {
            getBannerListFn(){
        			request({
				  	    url: api.bannerLists,
				        data: { id: 1 },
				      	successCb: (res) => {
			       			 console.log(res);
				      	  },
					    });
         		   }
            }
    }
</script>

vue3 + TS 版

requset.js 代码

const BASE_URL = 'http://127.0.0.1:8080/api/'
// | 请求前的拦截
uni.addInterceptor('request', {
    invoke(args) {
        // ! (若 BASE_URL 结尾没有带 '/' 则不需要)
        // | 判断传入 url 收否为 '/' 如果是就删除
        if (args.url.charAt(0) === '/') args.url = args.url.replace(/^[/]/, '')
        args.url = BASE_URL + args.url
    }
})
/**
 * @param url 请求地址
 * @param data 请求参数
 * @param method 请求参数
 *
 * */
const requestPromise = <T>(url: string, data: any, method: 'GET' | 'POST'): Promise<T> => {
    return new Promise((resolve, reject) => {
        uni.request({
            method,
            url,
            data,
            dataType: 'json',
            success: ({ statusCode, data }) => {
                if (statusCode === 200) resolve(data as T)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

export const request = {
    get: <T>(url = '', data = {}): Promise<T> => {
        return requestPromise<T>(url, data, 'GET')
    },
    post: <T>(url = '', data = {}): Promise<T> => {
        return requestPromise<T>(url, data, 'POST')
    }
}

api.ts 代码

import { request } from '@/utils/request' // 导入 request 文件  看自己的request 文件路径放在哪个文件

export const bannerAPI = (): Res<IBanner> => request.get('/banner')

export const hotAPI = (params: { type: number; area: number }) =>
    request.post(`/artist/list?type=${params.type}&area=${params.area}`)

export const testApi = (params: { limit: number }) =>
    request.get(`personalized?limit=${params.limit}`)

// 返回的参数  根据自己需求定义自己需要的返回类型
type Res<T> = Promise<T>
interface IBanner {
    banners: any[]
    code: number
}