axios(xhr) 和 fetch 两种请求方式

axios (search箭头函数)

import axios from "axios";
search = () => {
    axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
                response => {
                    console.log('successs');
                    console.log(response.data);
                },
                error => {
                    console.log('errors');
                    console.log(error);
                },
            );
}

fetch

    search = () => {
        //未优化版本
        fetch(`https://api.github.com/search/users?q=${keyWord}`).then(
                    response => {
                        console.log('successs');
                        console.log(response);
                        //继续返回一个promise对象
                        return response.json();
                    }
                ).then(response => { //接下来继续then
                    console.log('successs');
                    console.log(response.data.items);
                }).catch(error => { //统一处理error
                    console.log('errors');
                    console.log(error);
                });
    }

// ------------- 优化后版本(异步)
 search = async () => {
     try {
            //注意: 使用 await  外部函数必须增加 async 标识
            const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`);
            const data = await response.json();
            console.log('request success : ', data);
        } catch (error) {
            console.log('fetch error:', error);
        }
 }

哪个更好呢?

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 1

看个人习惯吧,当不止一个 promise 需要执行时,我个人倾向用 await 便于 try catch 统一的异常收口

3周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!