持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

前言

一句话总结axios和fetch的区别：fetch是浏览器提供的api，axios是社区封装的一个组件，前面已经学习到了axios的特点，fetch相对来说语法简单，更加语义化,fetch是windows内置的发送请求的用法，其他axios和Jquery中的ajax需要引入其他的包。

解决回调地狱

fetch 和axios都是promise风格，promise风格的ajax请求讷讷感解决回调地狱。使用了then方法得到异步任务正确的结果。

Promise主要用于解决异步回调嵌套的问题。 不断产生一个发送网络请求的事件，当多个请求之间存在依赖关系，也就是说当其中一个请求必须使用另一个请求返回的结果时，需要将这个请求嵌套在另一个请求的回调函数上，才能使用另一个请求的结果来发送这个请求。

Promise 是es6新语法 主要是处理异步编程，这个理念非常重要，好多的面试题都说需要什么手写promise，哈哈，难度非常大。promise是一个对象 可以获取异步操作的消息。不用Promise就需要写一层一层的嵌套代码，非常难理解非常难处理错误。

为什么javascript这么多的东西需要用到异步和回调呢？ 因为javascript所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行，异步执行可以用回调函数实现。

fetch用法

先看看axios的基本用法进行对比：

axios.get(`/api1/search/users?q=${keyWord}`).then(
        response => {
            PubSub.publish('show_status',{isLoading:false,users:response.data.items})
        },
        error => {
                //请求失败后通知App更新状态
            PubSub.publish('show_status',{isLoading:false,err:error.message})
        }
)

将上面的axios改写为fetch用法：

try {
        const response= await fetch(`/api1/search/users2?q=${keyWord}`)
        const data = await response.json()
        PubSub.publish('show_status',{isLoading:false,users:data.items})
} catch (error) {
        PubSub.publish('show_status',{isLoading:false,err:error.message})
}

fetch没有自动处理返回值的格式。返回的是一个respnse对象，需要使用json()方法把结果转码为json。如果服务器报错的话，使用json()方法就会报错就会被try catch捕获这个错误。

fetch总结

通过上面两个代码块的对比看起来fetch比较简单，但是axios还是比较主流的，使用的人比较多，可能是fetch比较简陋，功能不够多，fetch也有一定的发展趋势，很多新的库都默认使用fetch。

GitHub用户搜索项目总结

1.ES6知识点总结：解构赋值+重命名： 将属性，值从对象或数组中取出,赋值给其他变量

let obj = {a:{b:1}}    
const  {a} = obj ; //传统解构赋值 

const {a:{b}} = obj //连续解构赋值
const {a:{b:value}} = obj //连续解构赋值+重命名

2.消息订阅与发布机智 先定于，再发布，用于组件之间进行通信，需要在在组件卸载的钩子函数中取消订阅