fetch发送网络请求

-

fetch文档：https://github.github.io/fetch/

axios和jquery都是基于原生的XMLHttpRequest对象封装的，

除了这个原生对象以外，还有fetch函数也可以请求网络数据

search = async () => {
    // 获取用户输入
    const { value: keyWord } = this.keyWordElement;
    // 消息发布
    // 发送请求前通知List更新状态
    PubSub.publish('updateListState', { isFirst: false, isLoading: true, err: '' })
    // #region---使用axios发送请求
    // 获取网络请求
    // axios.get(`https://api.github.com/search/users?q=${keyWord}`).then(
    //   res => {
    //     PubSub.publish('updateListState', { users: res.data.items, isLoading: false  })
    //   },
    //   err => {
    //     // 请求失败后通知List更新错误信息状态
    //     PubSub.publish('updateListState', { err: err.message, isLoading: false })
    //   }
    // )
    // //#endregion

    // 使用fetch发送请求(未优化)
    // fetch是关注分离的的，先关注连接状态，再拿到结果
    fetch(`https://api.github.com/search/users?q=${keyWord}`, {}).then(
      res => {
        console.log(res, '联系服务器成功了');
        return res.json(); // res.json方法返回一个promise对象
      },
      // err => {
      //   console.log(err, '联系服务器失败了');
      //   // return new Promise(() => {}); // 返回一个新的promise对象，就不会继续往下走了（不会进入下面的.then)
      //   return Promise.reject(err); // 把错误信息传到下面的.then的失败回调
      // }
    ).then(
      res => {
        console.log(res, '拿到数据');
      },
      err => {
        console.log(err, '拿到数据失败');
      }
    )

    // 使用fetch发送请求(未优化)
    try {
      const res = await fetch(`https://api.github.com/search/users?q=${keyWord}`);
      const result = await res.json();
      console.log(result, 'result');
      PubSub.publish('updateListState', { users: result.items, isLoading: false  });
    } catch (error) {
      console.log(error, '请求出错');
      PubSub.publish('updateListState', { err: error.message, isLoading: false })
    }
    
  }

 

 

 

 

 

 

-