Promise

Promise

解决异步调用，是一个数据容器，保存未来结果

1
2
3
4
5
6
1// then只有在resolve执行之后，才会执行
2promise.then(result=>{
3    promise.then(res=>{
4        ....
5    })
6})

ajax

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 1// 发送异步请求
 2const xmlhttp = new XMLHttpRequest()
 3
 4// 连接服务器, true允许异步
 5xmlhttp.open('GET', 'http://www.yyxx.org/data.php', true)
 6xmlhttp.send('id=1')
 7
 8// 监听状态码
 9xmlhttp.onreadystatechange = function(){
10    // readyState表示xmlhttp加载过程
11    if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
12        const result = xmlhttp.responseText
13        // 格式化
14        const obj = JSON.parse(result)
15    }else{
16        error('request failed')
17    }
18}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 1function ajax(method='GET', url, data, async=true, success){
 2    ....
 3    // 格式化
 4    const obj = JSON.parse(result)
 5    success(obj)
 6}
 7
 8ajax({
 9    method:'GET',
10    url:'http://www.yyxx.org/data.php',
11    async:true,
12    data:'id=1',
13    success:fuction(msg){
14        console.log(msg)
15    },
16    error:function(error){
17    }
18})

缺陷

回调地狱，嵌套使用ajax来发送请求

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
 1ajax({
 2    method:'GET',
 3    url:'http://www.yyxx.org/data.php',
 4    async:true,
 5    data:'id=1',
 6    success:fuction(msg){
 7      ajax({
 8	method:'GET',
 9	url:'http://www.yyxx.org/data.php',
10	async:true,
11	data:'id=1',
12	success:fuction(msg){
13		console.log(msg)
14	},
15	error:function(error){
16	}
17      })
18    },
19    error:function(error){
20    }
21})

axios

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 1export function findDataByGetApi<T>(id: number): Promise<T> {
 2  const baseUrl = 'http://www.yyxx.org/'
 3  const url = 'data.php?id=' + id
 4  const instance = axios.create({
 5    baseURL: baseUrl,
 6    timeout: 5000,
 7    headers: {
 8      "Content-type": "application/json"
 9    }
10  })
11  return new Promise((resolve, reject) => {
12    instance.get(url).then((res: AxiosResponse) => {
13      resolve(res.data)
14    }).catch((error: AxiosError) => {
15      console.log(`http error[${error}]`)
16      reject(new Error('http error'))
17    });
18  })
19}
20
21export function findDataByPostApi<T, K>(id: number, requestData: K): Promise<T> {
22  const baseUrl = 'http://www.yyxx.org/'
23  const url = 'data.php?id=' + id
24  const instance = axios.create({
25    baseURL: baseUrl,
26    timeout: 2000,
27    headers: {
28      "Content-type": "application/json"
29    }
30  })
31  return new Promise((resolve, reject) => {
32    instance.post(url, JSON.stringify(requestData)).then((res: AxiosResponse) => {
33      resolve(res.data)
34    }).catch((error: AxiosError) => {
35      console.log(`http error[${error}]`)
36      reject(new Error('http error'))
37    });
38  })
39}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12