uniapp封装异步请求工具request

博主：茶白
发布时间：2021 年 03 月 16 日
暂无评论
1202字数
分类：开发

* uniapp封装一个简单的异步请求
* 根目录新建一个utils目录 完了创建一个request.js
* 当然建在哪里都无所谓

![image.png](http://blog.11dz.cn/usr/uploads/2021/03/2023403655.png)
* 完了写点代码进去

```
export default()=>{
}
```

* new 一个 Promise对象 给他return一哈

```
return new Promise((resolve,reject)=>{
})
```

* 因为是微信小程序 所以封装个wx.request进去

```
wx.request({
	...params,//es6解构赋值写法
	success(res){
		resolve(res);//成功
	},
	fail(err){
		reject(err);//失败
	},
	complete(){
	//接口调用结束的回调函数（调用成功、失败都会执行）
	}
})
```

* 每次请求都会耗时 加个loading 这样对用户友好些

```
uni.showLoading({
	title:"加载中"
})
```

* 完了请求结束还得关掉这个loading,正好上面不是写了个complete吗 结构结束的回调函数 写在里面

```
export default(params)=>{
	uni.showLoading({
		title:"加载中"
	})
	return new Promise((resolve,reject)=>{
		wx.request({
			...params,
			success(res) {
				resolve(res);
			},
			fail(res) {
				reject(res);
			},
			complete(){
				uni.hideLoading();
			}
		})
	})
}
```

* 找到main.js 或者 带有import Vue from 'vue'的js

```
//引入一下
import request from './utils/request'
// 添加实例
Vue.prototype.request = request
```

* 这样就可以在别的页面用我们封装的异步请求了

```
this.request({
	url:"http://blog.11dz.cn/"
})
.then(res=>{
	console.log(res);
})
```

最后修改：2021 年 03 月 16 日