uniapp接口封装和使用

- 日理万妓 2021-07-24 12:03 596阅读 0赞

新建util文件夹，当前目录下新建api.js，代码为下

const BASE_URL = 'http://192.168.110.188:8001'   //后端给的url
    
    export const myRequest = (options) => {
    	
    	return new Promise((resolve,reject)=> {
    		let authtoken = uni.getStorageSync('authtoken')
    		uni.request({
    			url:BASE_URL + options.url,
    			data:options.data || {},
    			method:options.method || 'GET',
    			header:{
    			    'Content-type': 'application/json',
    				"X-Auth-Token": uni.getStorageSync('authtoken')  //这里的token指的是微信授权登录的token，用来判断小程序是否属于登录状态
    			},
    			dataType:'json',
    			success:res => {
    				if(res.data.code !== 0){
    				}
    				resolve(res)
    			},
    			fail:err => {
    				// uni.showToast({
    				// 	title:"请求接口失败",
    				// })
    				console.log('err',err)
    				reject(err)
    			}
    		})
    	}) 
    }

> 第二步全局引入 main.js

import {
    	myRequest
    } from './util/api.js'
    Vue.prototype.$myRequest = myRequest

> 第三步在你需要调接口的界面使用即可

cracted(){
        this.integral()
    }
    methods:{
         integral() {
    		   this.$myRequest({
    				url: '/mall/user-integral',
    			}).then(res => {
    				this.integrall = res.data.integral
    			})
    	},
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，596人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp接口请求api封装，规范化调用

封装规范和vue中的差不多，都是统一封装成一个request对象，然后在api.js里面调用。先创建一个utils文件夹，然后里面创建一个request.js，代码如下：

忘是亡心i/ 2024年02月20日 08:47/ 0 赞/ 45 阅读

相关 UniApp Api接口封装

全局注册，通过this调用适用于vue 跟 uniapp > 在uniapp 下 > 跟pages同级下 > 创建一个api文件夹下 > 在创建一个http

分手后的思念是犯贱/ 2022年12月25日 15:52/ 0 赞/ 291 阅读

相关 uniapp H5 JSSDK封装使用

先看效果吧，封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

朱雀/ 2022年12月20日 05:35/ 0 赞/ 322 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打

忘是亡心i/ 2022年10月12日 15:00/ 0 赞/ 266 阅读

相关 uniapp 数据请求封装以及通用使用

import urlConfig from './config.js' const request = {} const headers =

川长思鸟来/ 2021年09月17日 23:30/ 0 赞/ 515 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1560 阅读

相关【uniapp】 uni-app使用getPhoneNumber接口

uni-app按照官方写法，始终报错，连续踩坑 <button open-type="getPhoneNumber" bindgetphonenumber="

清疚/ 2021年07月26日 20:07/ 0 赞/ 1815 阅读

相关 vue.js、uniapp两种封装接口请求方法

前言：分别有两种封装方法适用于vue.js和uniapp；第一种：全局注册，通过this调用，不需要import引入js文件。第二种：需要请求接口的页面还要import一下。

超、凢脫俗/ 2021年07月24日 19:03/ 0 赞/ 1365 阅读

相关 uniapp接口请求封装api(超简单)

最下面有使用方法 const commoneUrl = "http://192.168..."; //公共路径 const userId =

ゝ一世哀愁。/ 2021年07月24日 14:56/ 0 赞/ 4044 阅读

相关 uniapp接口封装和使用

新建util文件夹，当前目录下新建api.js，代码为下 const BASE_URL = 'http://192.168.110.188:8001' /

- 日理万妓/ 2021年07月24日 12:03/ 0 赞/ 597 阅读