uniapp 接口封装

Posted 奥特曼 

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp 接口封装相关的知识,希望对你有一定的参考价值。

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"
  

以上是关于uniapp 接口封装的主要内容,如果未能解决你的问题,请参考以下文章

uni-app 封装接口以及使用

uniapp 接口封装

uniapp 接口封装

uniapp请求+uView2.0请求封装

uni-app请求Promise封装

uniapp封装公共请求typescript版