UNIAPP day_03(9.1)服务器端数据的异步请求

面试题：服务器端数据的异步请求有哪些技术可以使用？

1. HTML旧有技术 —— XMLHttpRequest： 兼容性好；使用复杂，基于回调
2. HTML5新方案 —— fetch：用于取代XHR，新浏览器都支持，基于Promise，使用简单
3. jQuery封装方法 —— jQuery.ajax()： 对XHR的封装，兼容性好，使用简单；第三方库、基于回调
4. Vue.js推荐方案 —— axios：对XHR的封装，兼容性好，使用方便，基于Promise；第三方工具
5. 微信小程序方案 —— wx.request( )
6. uni-app方案 —— uni.request( )： 既可以用回调方式调用，也可以以Promise方式访问

使用uni.request()方法异步的数据请求：

发起GET请求

let url = "URL?k=v&k=v..."
uni.request( { url } )
.then(result=>{  
   result[1].data 就是响应消息主体 
})
.catch(err=>{})
1
2
3
4
5
6

发起POST请求

let url = "URL"
uni.request({
   url,
   method: 'POST',
   header: {'Content-Type': 'application/x-www-form-urlencoded'},
   data: {k1: v1,   k2:v2}
})
.then(result=>{   result[1].data就是响应消息主体   })
.catch(err=>{})
1
2
3
4
5
6
7
8
9

重要知识点：对服务器端数据API及客户端请求进行“二次封装”
为什么要对接口及异步请求进行“二次封装”：

1. 对服务器域名、端口号等URL地址进行统一管理，提高代码的可维护性
2. 对底层的异步请求技术进行屏蔽，便于修改具体的实现，提高代码的可维护性
3. 统一管理“横切关注点”(多个请求之前或之后都要执行的类似功能)，例如：“加载中”提示框的显示和隐藏、请求耗时统计…

ES6的新特性：Promise + async/await（都是Promise的语法糖）

async：用于修饰一个function，该函数体内仍然都是同步执行语句，最后的返回值变为new Promise() —— 这样的函数称为“异步函数”； async是可以脱离await独立使用的

async function f3(){
    let a = 1
    let b = 2
    let c = a + b 
    return c
}

let result = f3()    //result 是 Promise
1
2
3
4
5
6
7
8

await：用于修饰任意的一个表达式，用于“等待”该表达式执行完才返回其结果；语法上要求，await所在的函数必须声明为async —— 存在“等待”现象的函数一定是未来某个时刻才能结束的(即异步的）

async function f4(){
  let c = await  1+2
  let result  =  await  uni.request()
  return  c + result 
}

let data = f4()   //data是Promise
1
2
3
4
5
6
7