基本使用

请求测试地址：http://101.132.72.36:5100/api/local
使用 fetch 函数即可立即向服务器发送网络请求

参数

该函数有两个参数：
1. 必填，字符串，请求地址
2. 选填，对象，请求配置

请求配置对象

method：字符串，请求方法，默认值GET
- headers：对象，请求头信息
- body: 请求体的内容，必须匹配请求头中的 Content-Type
- mode：字符串，请求模式
- cors：默认值，配置为该值，会在请求头中加入 origin 和 referer 跨域时可能会用到 根据对方服务器配置情况而定
- no-cors：配置为该值，不会在请求头中加入 origin 和 referer，跨域的时候可能会出现问题
- same-origin：指示请求必须在同一个域中发生，如果请求其他域，则会报错
- credentials: 如何携带凭据（cookie）
- omit：默认值，不携带cookie
- same-origin：请求同源地址时携带cookie
- include：请求任何地址都携带cookie
- cache：配置缓存模式
- default: 表示fetch请求之前将检查下http的缓存.
- no-store: 表示fetch请求将完全忽略http缓存的存在. 这意味着请求之前将不再检查下http的缓存, 拿到响应后, 它也不会更新http缓存.
- no-cache: 如果存在缓存, 那么fetch将发送一个条件查询request和一个正常的request, 拿到响应后, 它会更新http缓存.
- reload: 表示fetch请求之前将忽略http缓存的存在, 但是请求拿到响应后, 它将主动更新http缓存.
- force-cache: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 除非没有任何缓存, 那么它将发送一个正常的request.
- only-if-cached: 表示fetch请求不顾一切的依赖缓存, 即使缓存过期了, 它依然从缓存中读取. 如果没有缓存, 它将抛出网络错误(该设置只在mode为”same-origin”时有效).

返回值

fetch 函数返回一个 Promise 对象
- 当收到服务器的返回结果后，Promise 进入resolved状态，状态数据为 Response 对象
- 当网络发生错误（或其他导致无法完成交互的错误）时，Promise 进入 rejected 状态，状态数据为错误信息

Response对象

• ok：boolean，当响应消息码在200~299之间时为true，其他为false
  - status：number，响应的状态码
  - text()：用于处理文本格式的 Ajax 响应。它从响应中获取文本流，将其读完，然后返回一个被解决为 string 对象的 Promise。
  - blob()：用于处理二进制文件格式（比如图片或者电子表格）的 Ajax 响应。它读取文件的原始数据，一旦读取完整个文件，就返回一个被解决为 blob 对象的 Promise。
  - json()：用于处理 JSON 格式的 Ajax 的响应。它将 JSON 数据流转换为一个被解决为 JavaScript 对象的promise。
  - redirect()：可以用于重定向到另一个 URL。它会创建一个新的 Promise，以解决来自重定向的 URL 的响应。

  示例如下

  <button>获取省份</button>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        async function getCity (){
            const url = "http://101.132.72.36:5100/api/local";
            const date = {
            }
            try{
                const resp = await fetch(url) // 请求数据
                const result = await resp.json() // 将数据转为json格式
                console.log(result)
            }catch (err){
                console.log(err)
            }
        }
        btn.onclick = function(){
            getCity()
        }
    </script>