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

ゝ一世哀愁。 2021-07-24 14:56 4044阅读 0赞

### 最下面有使用方法 ###

const commoneUrl  = "http://192.168..."; //公共路径 
    
    const userId = uni.getStorageSync("userinfo_Data").id //用户id
    
    //post请求封装
    function postRequest(url,data,type){
    	var promise = new Promise((resolve,reject) => {
    		var postData = data;
    		uni.request({
    			url:commoneUrl + url,
    			data:postData,
    			method:'POST',
    			// dataType:"jsonp",
    			// jsonp:"callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名
    			// jsonpCallback:"success_jsonpCallback",
    
    			header:{
    				'content-type': type || 'application/json;charset=UTF-8','token':uni.getStorageSync('token')}, //token可以不要，看后端
    			success:function(res){
    				resolve(res.data);
    				
    			},
    			error:function(e)
    			{
    				reject('网络出错');
    			}
    		})
    	});
    	return promise;
    }
    
    //get请求封装
    function getRequest(url,data){
    	var promise = new Promise((resolve,reject) => {
    			var postData = data;
    			uni.request({
    				url:commoneUrl + url,
    				data:postData,
    				method:"GET",
    				dataType:'json',
    				header:{
    					'content-type': 'application/json','token':uni.getStorageSync('token')},
    				success:function(res){
    					resolve(res.data);
    					
    				},
    				error:function(e)
    				{
    					reject('网络出错');
    				}
    			});
    	});
    	return promise;
    }
    //put请求封装
    function putRequest(url,data,heads){
    	var promise = new Promise((resolve,reject) => {
    			var postData = data;
    			uni.request({
    				url:commoneUrl + url,
    				data:postData,
    				method:"PUT",
    				dataType:'json',
    				header:{
    					'content-type': 'application/json','token': uni.getStorageSync('token')},
    				success:function(res){
    					resolve(res.data);
    					
    				},error:function(e){
    					reject('网络出错');
    				}
    			});
    	});
    	return promise;
    }
    //del请求封装
    function delRequest(url,data){
    	var promise = new Promise((resolve,reject) => {
    			var postData = data;
    			uni.request({
    				url:commoneUrl + url,
    				data:postData,
    				method:"DELETE",
    				dataType:'json',
    				header:{
    					'content-type': 'application/json','token': uni.getStorageSync('token')},
    				success:function(res){
    					resolve(res.data);
    				
    				},error:function(e){
    					reject('网络出错');
    				}
    			});
    	});
    	return promise;
    }
    module.exports = {
        post: postRequest,
        get: getRequest,
    	put: putRequest,
    	del: delRequest,
    	ip: commoneUrl,
    	userId : userId
    };

## 使用方法 ##

main.js引入

import api from './api.js'
    Vue.prototype.api = api

页面使用

//传参方式
    //data={
    	//name:this.name
    //}或
    // thia.api.get('HomePage/Controller',{name:this.name},请求头类型非必传)
    
    // thia.api.get('HomePage/Controller',data,请求头类型非必传).then(res=>{
    	// 	console.log(4444444,res);	
    	// 	this.goods = []
    	// 	if(res.data.code == 200){
    	// 		  this.goods = that.data.data
    	// 	  }
    // })

发表评论取消回复

表情：

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

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

相关阅读

相关 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封装request请求

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

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

相关 uniapp封装request请求

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

今天药忘吃喽~/ 2022年10月11日 00:45/ 0 赞/ 249 阅读

相关 uniapp unirequest 网络请求封装

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

╰半橙微兮°/ 2021年09月17日 22:36/ 0 赞/ 521 阅读

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

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

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

相关 uniapp 公共方法封装公共请求封装

一般我都习惯把公共js封装到util这个文件夹下常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里目录： ![20201117155628

男娘i/ 2021年07月24日 20:05/ 0 赞/ 1513 阅读

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

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

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

相关 uniapp自己封装请求拦截

request.js export function packRequest(obj){ let { url, method, params, da

Love The Way You Lie/ 2021年07月24日 17:13/ 0 赞/ 914 阅读

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

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

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