fetch.js是啥

Posted 2023-04-11

参考技术A 与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise，因此是一种简洁明了的API，比XMLHttpRequest更加简单易用。

mode属性用来决定是否允许跨域请求，以及哪些response属性可读。可选的mode属性值为 same-origin，no-cors（默认）以及 cores;

same-origin模式很简单，如果一个请求是跨域的，那么返回一个简单的error，这样确保所有的请求遵守同源策略
no-cors模式允许来自CDN的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的method只能是"HEAD","GET"或者"POST"
cors模式我们通常用作跨域请求来从第三方提供的API获取数据
Response 也有一个type属性，它的值可能是"basic","cors","default","error"或者"opaque";

"basic": 正常的，同域的请求，包含所有的headers除了"Set-Cookie"和"Set-Cookie2"。
"cors": Response从一个合法的跨域请求获得， 一部分header和body 可读。(限定只能在响应头中看见“Cache-Control”、“Content-Language”、“Content-Type”、“Expires”、“Last-Modified”以及“Progma”)
"error": 网络错误。Response的status是0，Headers是空的并且不可写。(当Response是从Response.error()中得到时，就是这种类型)
"opaque": Response从"no-cors"请求了跨域资源。依靠Server端来做限制。(将不能查看数据，也不能查看响应状态，也就是说我们不能检查请求成功与否;目前为止不能在页面脚本中请求其他域中的资源)

使用POST方法提交页面中的一些数据:将method属性值设置为post，并且在body属性值中设置需要提交的数据;

credentials属性决定了cookies是否能跨域得到 : "omit"(默认),"same-origin"以及"include";

浏览器支持：

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微软也考虑在未来的版本中支持Fetch。

讽刺的是，当IE浏览器终于微响应实现了progress事件的时候， XMLHttpRequest 也走到了尽头。 目前，如果你需要支持IE的话，你需要使用一个 polyfill 库。

promises介绍：

这种写法被称为composing promises, 是 promises 的强大能力之一。每一个函数只会在前一个 promise 被调用并且完成回调后调用，并且这个函数会被前一个 promise 的输出调用；

小程序 3 封装 (wx.request)

用promise封装 wx.request()

      promise 是一个 构造函数,主要是用来封装异步操作并可以获取成功(relove)或失败(reject)的结果  

     首先创建一个http文件夹

     里面有三个js文件  分别是:api.js (用来存储接口地址)  fetch.js(用来封装wx.request)  http.js (用来合并 api.js 和 fetch.js)

            api.js

                  

module.exports={
  // 名字 : '地址'
  banner:'/home/multidata'
}

 

fetch.js 

        

module.exports = (url, method, data) => {
  // 定义一个变量 用来接受Promise 返回来的值
  let p = new Promise((resolve, reject) => {
    wx.request({
      // 地址
      url: url,
      // 要传输的数据
      data: data,
      // 什么请求
      method: method,
      // 返回回来的数据  正确的情况下
      success(res) {
        resolve(res)
      },
      // 错误的情况下
      fail(err) {
        reject(err)
      }
    })
  })
  // 返回 p
  return p
}

   http.js

 

let api = require('./api');

let fetch = require('./fetch');
// 定义接口开头
let urlBase = 'http://123.207.32.32:8000/api/h8';
// 创建函数
function banner() {
  // 返回banner 对象
  return fetch(urlBase+api.banner,'get',{})
}

module.exports={
  // 返回banner对象
  banner
}

 然后在 app.js 中 定义

const  http = require('./http/http')

App({
     http
})

最后 在 index.js中定义

// 获取 app.js
const app = getApp();

Page({
     onLoad: function (options) {
        
       app.http.banner().then((res)=>{
        let {data:{data:{banner:{list}}}} = res;
           this.setData({
             arr:list
           })
     })
  },
})

最后到 index.wxml中渲染

<swiper autoplay='true' interval="1000" indicator-dots="true" indicator-color="black" indicator-active-color="white">
  <swiper-item wx:for="{{list}}" wx:key="index">
    <view >
      <image
      style="width:100%"
        src="{{item.image}}" />
    </view>
  </swiper-item>
</swiper>