uni-app 封装网络请求uni.request()并实现同步

之前可以通过uni.request来获取接口的数据,但是无法完成数据在页面渲染的目的。查阅资料发现是因为网络请求是异步操作(因为网络操作的响应时间是不定的,无法直接按照我们的代码序列顺序执行),要想达成目的,需要进行同步化操作。此外为了能在各个页面都方便地使用这个请求,再进行一个封装并挂载到全局的操作

需要的步骤

  1. 新建js文件进行操作的封装,并在main.js中挂载全局
  2. 通过async& await进行同步化操作

JS文件配置

  1. 建立.js文件,路径:/components/my-request/api.js
  2. 主体分析
    • 因为要用async& await 进行同步化操作,而await后面只能跟Promise数据类型,所以要返回一个Promise数据
    • 因为不同的接口地址不同,传给接口的数据也有所不同,所以统一用一个变量options来表示(如option.url表示接口url)
    • 主体代码如下,视情况还可以再加上显示加载框的方法,目前展示的应该是最简单的封装(fail函数其实也可以删除)
export const myRequest = (options)=>{
	return new Promise((resolve, reject)=>{
		// 封装主体:网络请求
		uni.request({
			url: BASE_URL + options.url,
			data: options.data || {},		
			method: options.method || 'GET',// 默认值GET,如果有需要改动,在options中设定其他的method值
			success: (res) => {
				console.log(res.data);		// 控制台显示数据信息
				resolve(res)
			},
			fail: (err) =>{
				// 页面中弹框显示失败
				uni.showToast({
					title: '请求接口失败'
				})
				// 返回错误消息
				reject(err)
			}
		})
	}
	)
}

main.js配置

添加代码

// 接收api.js下的myRequst方法
import { myRequest } from './components/my-request/api.js'
// 挂载到全局,让所有的页面都能调用myRequest方法
Vue.prototype.$myRequest = myRequest

在页面中使用封装好的方法


代码分析:

  1. method中新建一个方法,取名为intitPage,实现以下两个功能
    • 从接口获取数据res
    • res初始化页面数据backendData
  2. async& await的使用
    • 语法
    async 函数名 (){
      await 需要同步的方法(必须是Promise类型)
    }
    
    • 功能:实现同步,await后的方法return了才执行下一条语句
  3. 数据获取应该在页面渲染之前,所以我们在onLoad()函数(页面加载时执行的函数)中执行intitPage
  4. res的属性有很多,通过查看res,发现我们需要的值在res.data中,所以给backendData赋的值是res.data(注:有时需要的数据在res.data.data中,这里到底用几个data可以通过控制台查看res的值来判断)

其他的点

  1. uni.request()的返回值是res,封装好后可以直接设一个值res = request(封装后)来获得数据
  2. 封装时,默认的值 用 || 后面的来设定
    method: options.method || 'GET'
  3. 函数会改变this的指向,有时候就不可以通过this.XX来访问页面data{reurn{} }里面的数据了。解决办法有两个:
    1. 使用箭头函数
    success: function(res){}
    ->
    success: res =>{}
    
    1. 在method中提前使用一个 _self 变量来存储this,后续要用到data中的数据时直接_self.XX
  4. 也可以把要给接口的数据做成一个变量,方便修改

                    
                    

你可能感兴趣的:(uni-app 封装网络请求uni.request()并实现同步)