uniAPP封装API

首先在项目中创建一个api（自定义名称）文件夹 ，然后在该目录下创建一个js文件进行配置。

然后js文件内进行配置

const api = (params) => {
	let URL = "https://api-hmugo-web.itheima.net/api/public/v1/" //域名
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: '加载中',
		})
		uni.request({
			url: URL + params.url,
			method: params.method || "GET",
			data: params.data || '',
			success: res => {
				uni.hideLoading()
				resolve(res.data)
			}

		})
	})
}
export default api

这就差不多成功一大半啦，倘若项目过大的话，我们还可以进行细分，废话不多说，上图

比如首页为index，为了便于区分，创建文件夹进行包裹，在index.js内放置所有首页的请求

import api from "../api.js" //先导入封装好的

const swiper = async () => { //轮播图
	let data = await api({
		url: 'home/swiperdata'
	})
	return data
}
const nav = async () => { // 导航
	let data = await api({
		url: "home/catitems"
	})
	return data
}
const floor = async () => { //楼层
	let data = await api({
		url: 'home/floordata'
	})
	return data
}
// export const floor = async () => { //楼层   这是一种导出方式
// 	let data = await api({
// 		url: 'home/floordata'
// 	})
// 	return data
// }
export {							//这是另一种导出方式
	swiper,
	nav,
	floor
}

ok，这就大功告成啦。非常的good。
其他页面需要使用只需引入文件即可
最后最后，引入使用解构赋值引入就能用啦

最后再补充一下常用vue封装api的

import store from '@/store'
import axios from 'axios'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import wod from './env'
const api = axios.create({
  baseURL: wod.prod.baseURL,
  timeout: 10000
})
api.interceptors.request.use(
  (config) => {
    NProgress.start()
    config.headers.Authorization = sessionStorage.getItem('touken')
    store.state.loading = true
    return config
  },
  (error) => new Promise.reject(error)
)

api.interceptors.response.use(
  (res) => {
    store.state.loading = false
    const {
      meta: { msg, status },
      data: result
    } = res.data // 解构赋值拿到msg，状态码和数据
    const state = [200, 201, 204] // 状态码
    if (state.includes(status)) {
      // 如果接口请求成功
      Message({
        message: msg,
        type: 'success'
      })
      if (res.config.url === '/login') {
        // 当前的地址
        sessionStorage.setItem('token', result.token)
      }
      NProgress.done()
      return result
    }
    Message({
      message: msg.message ? '暂无数据' : '' || msg,
      type: 'error'
    })
    console.log(msg, result)
    return Promise.reject(msg.message || msg)
  },
  (error) => {
    console.log(error)
    return Promise.reject(error)
  }
)
export default api

愿 天天开心 积极乐观 皆得所愿