uniapp 接口封装

Posted 2022-08-18 奥特曼　

1、一次封装

utils/request.js

export const baseURL = '基地址'

export const request = (options) => 
	return new Promise((resolve, reject) => 
		uni.request(
			url: baseURL + options.url, //接口地址：前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法：传入的方法或者默认是“GET”
			data: options.data || , //传递参数：传入的参数或者默认传递空集合
			header: 
				'token': uni.getStorageSync("token") || "" //自定义请求头信息
			,
			success: (res) => 
				console.log(res, uni.getStorageSync('token'));
				//返回的数据（不固定，看后端接口，这里是做了一个判断，如果不为true，用uni.showToast方法提示获取数据失败)
				if (res.data.code == 1) 
					resolve(res.data.data)
				 else 
					if(res.data.code== 401)
						uni.navigateTo(
							url:'/login/login'
						)
						uni.clearStorageSync()
					
					reject(res.data.msg)
				
				// 如果不满足上述判断就输出数据
			,
			// 这里的接口请求，如果出现问题就输出接口请求失败
			fail: (err) => 
				console.log(err)
				reject(err)
			
		)
	)

2、二次封装 

api/index.js

import 
	request
 from '@/utils/request.js'


// 获取论坛类型 /api/forum/ftype/index
export const getForumType = (page, rows) => request(url: 'forum/ftype/index',method: 'post',data: page,rows)

注意：每一个接口都需要定义一下 ，然后 每次使用时都需要按需引入

 3、页面使用 

	import getUserInfo from '@/api/mine'

	methods: 
			async getUserInfo()
			  try 
			    const res = await getUserInfo()
				this.userInfo = res
			    console.log('getUserInfo', res)
			    // 保存数据
			   catch (err) 
			 	uni.showToast( title:err,icon:'none' )
			    console.log('getUserInfo', err)
			  
			,

4. 如果页面使用很麻烦 可以利用代码片段作为快捷键

 

  
    // 注意：本文档仅支持单行注释，并且'//'前不能有任何非空字符！！！
    //
    // HBuilderX使用json扩展代码块，兼容vscode的代码块格式
    // 本文档修改完毕，保存即可生效，无需重启。
    // 本文档用于用户自定义1代码块。
    // 每个配置项的说明如下：
    // 'key'    ：代码块显示名称，显示在代码助手列表中的名字，以下例子中'console.log'就是一个key。
    // 'prefix' ：代码块的触发字符，就是敲什么字母匹配这个代码块。
    // 'body'   ：代码块的内容。内容中有如下特殊格式
    //          $1 表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置$1,如该位置有预置数据，则写法是$1:foo1。多选项即下拉候选列表使用$1:foo1/foo2/foo3
    //          $2 表示代码块输入后再次按tab后光标的切换位置tabstops（代码块展开后按tab可以跳到下一个tabstop）
    //          $0代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。
    //          双引号使用\\\\'转义
    //          换行使用多个数组表示，每个行一个数组，用双引号包围，并用逗号分隔
    //          缩进需要用\\\\t表示，不能直接输入缩进！
    // 'triggerAssist' ：为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示，拉出代码助手，默认为false。
    // 每个代码块以key为主键，多个代码块需要逗号分隔。
    // 如果json语法不合法，底部会弹出错误信息，请注意修正。
    // 例子:
    // "console.log": 
    //  "prefix": "logtwo",
    //  "body": [
    //      "console.log('$1');",
    //      "\\tconsole.log('$2');"
    //  ],
    //  "triggerAssist": false,
    //  "description": "Log output to console twice"
    // 
 "try catch async await": 
   "prefix": "async", // 快捷键 + tab
   "body": [
    "async $1()",
      "import  $2  from '@/api/$4'",
      "  try ",
      "    const res = await $2($3)",
      "    console.log('$2', res)",
      "    $5// 保存数据",
      "   catch (err) ",
      "  uni.showToast( title:err,icon:'none' )",
      "    console.log('$2', err)",
      "  ",
    ","
   ],
   "description": "async await"