Uni-app 封装 API 请求

Posted 2023-05-23 东八区

一、在文件夹 API 下创建 api.js

const BASE_URL = "";

// 封装请求方法
const request = (url, method, data) => 
	wx.showLoading(
		title: \'加载中\' // 数据请求前loading
	)
	return new Promise((resolve, reject) => 
		wx.request(
			url: BASE_URL + url, // 开发者服务器接口地址
			method: method,
			data: data,
			header: 
				\'content-type\': \'application/json\', // 默认值
			,
			success: function(res) 
				// 请求成功操作
				wx.hideLoading()
				resolve(res.data)
			,
			fail: function(err) 
				// 请求失败操作
				wx.hideLoading()
				reject(err)
			
		)
	)


// 封装网络请求
const get = (url, data) => 
	return request(url, \'GET\', data)


const post = (url, data) => 
	return request(url, \'POST\', data)


module.exports = 
	get,
	post

二、在 main.js 全局挂载引用

// 封装全局挂载 API
import api from \'api/api.js\'
Vue.prototype.api = api

三、在组件中直接 this.api 引用

this.api.post(\'/api\', data).then(e => );

uni-app封装网络请求promise

在项目的根目录下，创建http文件夹。
然后在创建request.js文件
文件代码如下

export  function apiapi(myurl,myget,mydata,tou="Accept: text/plain" ){
	return new Promise((resolve,reject)=>{
		uni.request({
			url: myurl, //真实接口地址。
			
			method:myget||"get",//请求的方式
			
			data:mydata||{},//参数
			
			header: {
				\'custom-header\': tou//自定义请求头信息，这里也可以携带token 
			},
				
			// 成功使用resolve
			success: (res) => {
				resolve(res)
			},
			
			//失败调用reject
			fail:(err)=>{
				reject(err)
			}
		});
	})
}

我是使用的promise进行封装的。
对promise封装的注意点
要有返回值  return
resolve,是成功时直接调用。将要传递的参数放入进去resolve(res)
reject失败错误直接调用。将要传递的参数直接放进去reject(err)

注意
在一个模块中，可以同时使用export default 和export 向外暴露成员
使用export向外暴露的成员，使用{  }的形式来接收，这种形式，叫做【按需导出】
使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收
使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名
import {title, content as content1} from \'./test.js\'

在某一个页面使用

先引入；这里注意导入的apiapi应该和暴露出来的一致哈！
import {apiapi} from "../../http/request.js"

//监听页面加载（常用来发送请求）
onLoad(option){	
	apiapi("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
	    console.log("zijide",res);
		}).catch(err=>{
	    console.log(err);
	})
},

按照上面这样封装，会出现一个问题就是。
每次使用的时候，都会引入。这样会很麻烦的。
因为我们几乎每一个页面都发是哪个请求
所以可以优化一下
将这个文件在main.js中引入。
然后挂载到Vue的原型上。
然后就可以直接使用了。因为原型的特点就是数据共享，节约空间
main.js

//因为是export暴露出来的，所以要使用{}来接受哈
import {apiapi} from "./http/request.js"

//直接挂载到原型上  通过this.$api直接调用
Vue.prototype.$api=apiapi;

在某个使用的页面

不需要再次引入了，因为挂载到原型上的
//监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参）
onLoad(option){	
	this.$api("https://edu.51cto.com/center/seckill/index/get-seckill-data","GET", { page:1,size:1},).then(res=>{
	    console.log("优化封装",res);
	}).catch(err=>{
	    console.log(err);
	})
},

我们在项目中，通常是将所有的请求放在同一个文件中。
这样方便我们管理
所以在 https文件夹中再新建一个文件，

命名为api.js

api.js文件

import {apiapi}  from "./https.js"

export const aa= params=>apiapi(\'https://edu.51cto.com/center/seckill/index/get-seckill-data\', \'get\',params);

这一句等价于
// 如果只有一个参数，可以省略括号。params是参数。
// export const aa= params=> 说明是一个匿名函数
// 去掉大括号的时候，可以去掉retuen.

// const aa=function(params){
//    return	apiapi(\'https://edu.51cto.com/center/seckill/index/get-seckill-data\', \'get\',params)
// }
// export  aa

main.js挂载到原型上

//引入进行接收
//listapi 身上有很多的方法，那个api.js所有的方法都在listapi上
import * as listapi from \'./http/api.js\';

//挂载到原型上
Vue.prototype.$listapi=listapi;

使用页面

onLoad(option){	
	this.$listapi.aa( { page:1,size:1}).then(res=>{
			console.log("再次封装11数据",res);
		}).catch(err=>{
			console.log(err);
	})
},

这样使用起来是不是更加的简单了。
更加的方便了呢。
将所有的接口进行统一的管理。便于维护了