FETCH中的基础语法以及封装自己的Ajax库

FETCH中的基础语法

注意：Fetch不是ajax，它是为了代替AJAX，是JS中内置的API，基于FETCH可以实现客户端和服务端的信息通信

• FETCH是ES2018规范中新增的API，所以浏览器的支持度不是特别好（可以基于BABEL的最新语法解析包，把它进行解析），想要兼容性好一些，需要使用“Fetch polywill”

• 使用Fetch发送请求

  fetch('/url',{
              method:'GET',
              //设置请求头
              headers:{
                  'Content-Type':'x-www-form-rulencoded'
              },
              //不管同源还是跨域请求都带着COOKIE信息
              credentials:'include'
          }).then(result => {
              console.log(result)
          }).catch(msg => {
              console.log(msg)
          })
  

注意：GET/HEAD等请求不能设置BDOY，不管服务器返回的状态为多少，Fetch都不认为是失败（4或5开头的），都执行的事THEN中的方法（需要自己进行异常抛出处理）

### 实际案例

fetch('/url').then(result => {
                let {status} = result;
                if(/^(4|5)\d{2}$/.test(status)){
                    throw new Error('query data is error');
                    return;
                }
                return result.json()
            }).then(result => {
                console.log(result)
            }).catch(result => {
                console.log(result)
            })

正确时：