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"
  }

}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐