fetch()学习

fetch()

• 类似于jquery封装的ajax、axios…就是一个交互用的，是ajax进阶版本可以说他是一个船新版本。
• 如果相兼容IE的话就可以放弃使用它了。IE目前来说不支持（万恶之源务必抵制）
• 
• 使用fetch()之前你必须掌握Promise中.then(res => {})的使用。

基本使用

    fetch(url, {})
                  .then(res => {})

第一个参数：url地址（不用多说），第二个参数在POST上一般会用到，GET一般可以不写可以。

返回的res一下属性：
.ok该属性是来检查response的状态是否在 200 - 299（包括200 和 299）这个范围内。该属性返回一个布尔值。
.status — 整数（默认值为200）为response的状态码。(404、500…之类)
.statusText — 字符串（默认值为"OK"），该值与 HTTP 状态码消息对应。（404对应NOT FOUND）

res常用方法：
json()如果服务器穿过来的是JSON格式字符串或JSON格式数组就会转换成JS对象
text()将服务器传过来的数据以String形式呈现

• GET实例

    fetch('http://127.0.0.1:3000/res-get')
                  .then(res => {
                    res.json().then(res => {
                      //...这里就可以拿到转化后的JSON数据
                    })
                    .cath(err => {
					// ... 如果服务器报错、或者根本不是json数据就会执行这条语句err会打印错误信息
					})
                  })

• POST实例
  +因为POST传递参数的方式不同于POST，以及需要设置请求头.
• 第二个参数是一个对象’
• methods与ajax类似请求类型
• body给你填写提交的内容，与ajax类似
• headers设置提交的信息类型比如：
  Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

fetch('http://127.0.0.1:3000/res-post', {
        method: 'POST', // POST请求
        body: `userName=xxx&passWord=123`,		// POST的参数 
        headers: {			// 设置的请求头
          'Content-Type': 'application/x-www-form-urlencoded' // 这里是表单内容
        }
      })
        .then(res => {
          res.json()
                    .then(res => {
                      console.log(res);
                    })
                    .catch(err => {
                      console.log('不是json格式或者服务器错误:', err);
                    })
        })

当然还有一些全局的对象比如：Request()、Response()、header()… 这些对象可以移步到MDN进一步深入学习：MDN学习fetch()