数据请求

接口声明

{ "name": "blueos.network.fetch" }

导入模块

import fetch from '@blueos.network.fetch' 或 const fetch = require('@blueos.network.fetch')

最小可运行示例

下面的示例点击按钮发起一次 GET 请求，并把状态码、解析结果或失败原因显示在页面上。

manifest.json（features 片段）

{
  "features": [{ "name": "blueos.network.fetch" }]
}

首页 src/pages/Home/index.ux

<script>
  import fetch from '@blueos.network.fetch'

  export default {
    data: {
      status: '点击按钮发起请求',
      result: '',
    },
    loadData() {
      this.status = '请求中…'
      this.result = ''
      fetch.fetch({
        url: 'https://httpbin.org/json',
        method: 'GET',
        responseType: 'json',
        success: (response) => {
          this.status = `请求成功，状态码 ${response.code}`
          const slideshow = response.data && response.data.slideshow
          this.result = slideshow && slideshow.title ? slideshow.title : '响应中没有 title 字段'
        },
        fail: (data, code) => {
          this.status = `请求失败：${data}`
          this.result = `错误码 ${code}`
        },
      })
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-2xl">{{ status }}</text>
    <text class="text-white text-2xl mt-20">{{ result }}</text>
    <input class="text-white mt-20" type="button" value="发起请求" onclick="loadData" />
  </div>
</template>

<style>
@tailwind utilities;
</style>

请求默认超时时间为 7000ms。fail 回调是必需的：设备无网络或权限受限时，只有它能让用户看到明确的失败提示。

接口定义

fetch.fetch(OBJECT)

获取网络数据

参数：

参数名	类型	必填	说明
url	String	是	资源 url
data	String/Object/ArrayBuffer	否	请求的参数，可以是字符串，或者是 js 对象、arraybuffer 对象。参考 data与Content-Type关系 部分
header	Object	否	请求的 header，会将其所有属性设置到请求的 header 部分。User-Agent 设置在版本开始支持。示例：{“Accept-Encoding”: “gzip, deflate”,“Accept-Language”: “zh-CN,en-US;q=0.8,en;q=0.6”}
method	String	否	默认为 GET，可以是：OPTIONS，GET，HEAD，POST，PUT，DELETE，TRACE，CONNECT
responseType	String	否	支持返回类型是 text，json，file，arraybuffer，默认会根据服务器返回 header 中的 Content-Type 确定返回类型，详见 success返回值。
timeout	Number	否	超时时间，单位 ms，默认值为 7000
success	Function	否	成功返回的回调函数
fail	Function	否	失败的回调函数，可能会因为权限失败
complete	Function	否	结束的回调函数（调用成功、失败都会执行）

data 与 Content-Type 关系

data	Content-Type	说明
String	不设置	Content-Type 默认为 text/plain，data 值作为请求的 body
String	任意 Type	data 值作为请求的 body
Object	不设置	Content-Type 默认为 application/x-www-form-urlencoded，data 按照 url 规则进行 encode 拼接作为请求的 body
Object	application/x-www-form-urlencoded	data 按照 url 规则进行 encode 拼接作为请求的 body
Object	application/x-www-form-urlencoded 之外的任意 type	会将 data 转为字符串作为请求的 body
ArrayBuffer	不设置	Content-Type 默认为 application/octet-stream，data 值作为请求的 body
ArrayBuffer	任意 Type	data 值作为请求的 body

success 返回值：

参数名	类型	说明
code	Integer	服务器状态 code
data	String/Object /ArrayBuffer	参考 responseType与success中data关系 部分
headers	Object	服务器 response 的所有 header

responseType 与 success 中 data 关系：

responseType	data	说明
无	String	服务器返回的 header 中 type 是 text/*或 application/json、application/javascript、application/xml，值是文本内容，否则是存储的临时文件的 uri，临时文件如果是图片或者视频内容，可以将图片设置到 image 或 video 控件上显示
text	String	返回普通文本
json	Object	返回 js 对象
file	String	返回存储的临时文件的 uri
arraybuffer	ArrayBuffer	返回 ArrayBuffer 对象

示例：

fetch.fetch({
  url: 'http://www.example.com',
  responseType: 'text',
  success: function (response) {
    console.log(`the status code of the response: ${response.code}`)
    console.log(`the data of the response: ${response.data}`)
    console.log(`the headers of the response: ${JSON.stringify(response.headers)}`)
  },
  fail: function (data, code) {
    console.log(`handling fail, errMsg = ${data}`)
    console.log(`handling fail, errCode = ${code}`)
  },
})