EveryLike/pages/API/request/request.uvue

<template>
  <view style="flex: 1;">
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-common-mt" style="border-width: 2px;border-style: solid; border-radius: 4px;">
        <textarea :value="res" class="uni-textarea" style="width: 100%"></textarea>
      </view>
      <view>
        <text>地址 : {{ host + url}}</text>
        <text>请求方式 : {{method}}</text>
      </view>
      <view class="uni-btn-v uni-common-mt">
        <button type="primary" @click="sendRequest">发起请求</button>
      </view>
    </view>
    <scroll-view style="flex: 1;" show-scrollbar="true">
      <view style="padding: 20px;">
        <text>设置请求方式</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px; margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('GET')">GET</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('POST')">POST</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('PUT')">PUT</button>
          <button style="padding: 5px; margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('DELETE')">DELETE</button>
          <button style="padding: 5px; margin-right: 10px; " type="primary" size="mini"
            @click="changeMethod('PATCH')">PATCH</button>
          <button style="padding: 5px;margin-right: 10px;" type="primary" size="mini"
            @click="changeMethod('OPTIONS')">OPTIONS</button>
          <button style="padding: 5px;" type="primary" size="mini" @click="changeMethod('HEAD')">HEAD</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求返回错误码的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in errorCodeUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求不同header的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in headerUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>
      <view style="padding: 20px;">
        <text>请求不同content-type的接口（默认为GET）</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in contentTypeUrls" :key="index"
            @click="changeUrl(item)">{{item}}</button>
        </view>
      </view>

      <view style="padding: 20px;">
        <text>POST请求(有body)</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini" v-for="(item, index) in postUrls" :key="index"
            @click="changeUrlFromPost(item)">{{item}}</button>
        </view>
      </view>
      <!-- #ifdef APP || MP-WEIXIN || WEB -->
      <view style="padding: 20px;">
        <text>ArrayBuffer 测试</text>
        <view class="uni-common-pb"></view>
        <view style="flex-direction: row;flex-wrap: wrap;">
          <button style="padding: 5px;" type="primary" size="mini"
            @click="sendArrayBuffer(false)">请求body为ArrayBuffer，response也为ArrayBuffer</button>
          <button style="padding: 5px;" type="primary" size="mini"
            @click="sendArrayBuffer(true)">请求response为ArrayBuffer</button>
        </view>
      </view>
      <!-- #endif -->

      <view style="padding: 20px;">
        <text>RequestTask 测试</text>
        <view class="uni-common-pb"></view>
        <button type="primary" @click="sendChunkRequest">流式请求</button>
      </view>
      <view class="uni-common-pb"></view>
      <view class="uni-common-pb"></view>
    </scroll-view>
  </view>
</template>
<script>
  // #ifdef APP-ANDROID || APP-IOS || APP-HARMONY
  import {
    testInovkeRequest,
    CommonOptions
  } from '@/uni_modules/test-invoke-network-api'
  // #endif

  class GETDataType {
    data : UTSJSONObject | null = null
  }

  const duration = 2000
  const methodMap = {
    "GET": "/api/http/method/get",
    "POST": "/api/http/method/post",
    "PUT": "/api/http/method/put",
    "DELETE": "/api/http/method/delete",
    "PATCH": "/api/http/method/patch",
    "OPTIONS": "/api/http/method/options",
    "HEAD": "/api/http/method/head"
  }


  export default {
    data() {
      return {
        title: 'request',
        res: '',
        task: null as RequestTask | null,
        host: "https://request.dcloud.net.cn",
        url: "/api/http/method/get",
        method: "GET" as RequestMethod | null,
        data: null as any | null,
        header: null as UTSJSONObject | null,
        errorCodeUrls: [
          "/api/http/statusCode/200",
          "/api/http/statusCode/204",
          "/api/http/statusCode/301",
          "/api/http/statusCode/302",
          "/api/http/statusCode/307",
          "/api/http/statusCode/400",
          "/api/http/statusCode/401",
          "/api/http/statusCode/403",
          "/api/http/statusCode/404",
          "/api/http/statusCode/405",
          "/api/http/statusCode/500",
          "/api/http/statusCode/502",
          "/api/http/statusCode/503",
          "/api/http/statusCode/504",
        ],
        headerUrls: [
          "/api/http/header/ua",
          "/api/http/header/referer",
          "/api/http/header/requestCookie",
          "/api/http/header/setCookie",
          "/api/http/header/deleteCookie"
        ],
        contentTypeUrls: [
          "/api/http/contentType/text/plain",
          "/api/http/contentType/text/html",
          "/api/http/contentType/text/xml",
          "/api/http/contentType/image/gif",
          "/api/http/contentType/image/jpeg",
          "/api/http/contentType/image/png",
          "/api/http/contentType/application/json",
          "/api/http/contentType/application/octetStream",
        ],
        postUrls: [
          "/api/http/contentType/json",
          "/api/http/contentType/xWwwFormUrlencoded",
        ],
        //自动化测试例专用
        jest_requestTask_result: false,
        jest_result: false,
        jest_result_data: ""
      }
    },
    onUnload() {
      uni.hideLoading();
      this.task?.abort();
    },
    methods: {
      sendChunkRequest() {
        uni.navigateTo({
          url: "/pages/API/request/requestTask"
        })
      },
      changeMethod(e : RequestMethod) {
        this.method = e;
        this.url = methodMap[e] as string;
        this.data = null;
        this.header = null;
      },
      changeUrl(e : string) {
        this.method = "GET";
        this.url = e;
        this.data = null;
        this.header = null;
      },
      changeUrlFromPost(e : string) {
        this.method = "POST";
        this.url = e;
        switch (e) {
          case "/api/http/contentType/json":
            this.header = {
              "Content-Type": "application/json"
            };
            this.data = {
              "hello": "world"
            };
            break;
          case "/api/http/contentType/xWwwFormUrlencoded":
            this.header = {
              "Content-Type": "application/x-www-form-urlencoded"
            };
            this.data = "hello=world";
            break;
        }
      },
      // #ifdef APP | MP-WEIXIN | WEB
      sendArrayBuffer(onlyResponse : boolean) {
        this.method = "POST"
        this.url = "/api/http/contentType/arrayBuffer/post"

        if (onlyResponse) {
          this.header = {
            "Content-Type": "application/json"
          };
          this.data = {
            "hello": "world"
          };
          uni.showLoading({
            title: "请求中..."
          })
          this.task = uni.request<ArrayBuffer>({
            url: this.host + this.url,
            method: this.method,
            data: this.data,
            header: this.header,
            timeout: 60000,
            sslVerify: false,
            withCredentials: false,
            responseType: 'arraybuffer',
            firstIpv4: false,
            success: (res) => {
              if (res.data != null) {
                let uint8 = new Uint8Array(res.data as ArrayBuffer)
                console.log('request success', uint8.toString())
                this.res = '请求结果 : ' + uint8.toString()

                console.log('request success header is :', JSON.stringify(res.header))
                uni.showToast({
                  title: '请求成功',
                  icon: 'success',
                  mask: true,
                  duration: duration
                });
              } else {
                uni.showModal({
                  content: 'error',
                  showCancel: false
                });
              }

            },
            fail: (err) => {
              console.log('request fail', err);
              uni.showModal({
                content: err.errMsg,
                showCancel: false
              });
            },
            complete: () => {
              uni.hideLoading()
              this.task = null
            },
          });


        } else {
          uni.chooseImage({
            count: 1,
            albumMode: "system",
            sizeType: ["original"],
            sourceType: ["album"],
            success: (e) => {
              console.log(e.tempFilePaths[0]);
              uni.getFileSystemManager().readFile({
                filePath: e.tempFilePaths[0],
                success: (res) => {
                  this.data = res.data as ArrayBuffer
                  this.header = {
                    "Content-Type": "application/octet-stream"
                  };

                  uni.showLoading({
                    title: "请求中..."
                  })
                  this.task = uni.request<ArrayBuffer>({
                    url: this.host + this.url,
                    method: this.method,
                    data: this.data,
                    header: this.header,
                    timeout: 60000,
                    sslVerify: false,
                    withCredentials: false,
                    firstIpv4: false,
                    responseType: 'arraybuffer',
                    success: (res) => {
                      console.log()
                      if (res.data != null) {
                        uni.showToast({
                          title: '请求成功',
                          icon: 'success',
                          mask: true,
                          duration: duration
                        });
                        this.res = '请求结果 : byteLength=' + (res.data as ArrayBuffer).byteLength
                        console.log('request success header is :', JSON.stringify(res.header))
                      } else {
                        uni.showModal({
                          content: 'error',
                          showCancel: false
                        });
                      }

                    },
                    fail: (err) => {
                      console.log('request fail', err);
                      uni.showModal({
                        content: err.errMsg,
                        showCancel: false
                      });
                    },
                    complete: () => {
                      uni.hideLoading()
                      this.task = null
                    },
                  });

                }
              })
            }
          });
        }
      },
      // #endif
      sendRequest() {
        uni.showLoading({
          title: "请求中..."
        })
        this.task = uni.request({
          url: this.host + this.url,
          // dataType: "json",
          // responseType: "json",
          method: this.method,
          data: this.data,
          header: this.header,
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res) => {
            console.log('request success', JSON.stringify(res.data))
            console.log('request success header is :', JSON.stringify(res.header))
            uni.showToast({
              title: '请求成功',
              icon: 'success',
              mask: true,
              duration: duration
            });
            this.res = '请求结果 : ' + JSON.stringify(res);
          },
          fail: (err) => {
            console.log('request fail', err);
            uni.showModal({
              content: err.errMsg,
              showCancel: false
            });
          },
          complete: () => {
            uni.hideLoading()
            this.task = null
          },
        });
      },
      //自动化测试例专用
      jest_request() {
        uni.request({
          url: this.host + this.url,
          // dataType: "json",
          // responseType: "json",
          method: this.method,
          data: this.data,
          header: this.header,
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_set_cookie() {
        uni.request({
          url: this.host + "/api/http/header/setCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_request(true)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_set_cookie_expires() {
        uni.request({
          url: this.host + "/api/http/header/setCookie?expires=5",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_request(true)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_delete_cookie() {
        uni.request({
          url: this.host + "/api/http/header/deleteCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_request(false)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_cookie_request(needCookie : boolean) {
        uni.request({
          url: this.host + "/api/http/header/requestCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res) => {
            const requestCookie = (res.data as UTSJSONObject).getJSON("data")?.getAny("requestCookie")
            this.jest_result_data = JSON.stringify(requestCookie)
            if (requestCookie instanceof Array) {
              this.jest_result = needCookie ? requestCookie.length > 0 : requestCookie.length == 0
            } else {
              this.jest_result = needCookie ? (requestCookie as UTSJSONObject).toMap().size > 0 : (requestCookie as UTSJSONObject).toMap().size == 0
            }
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_timeout_null() {
        uni.request({
          url: this.host + (methodMap['GET'] as string),
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_with_data() {
        uni.request({
          url: "https://unidemo.dcloud.net.cn/api/banner/36kr",
          method: "GET",
          data: {
            column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
          },
          timeout: 6000,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: () => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_with_generics() {
        uni.request<GETDataType>({
          url: this.host + (methodMap['GET'] as string),
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res : RequestSuccess<GETDataType>) => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_get_array() {
        uni.request<UTSJSONObject[]>({
          url: 'https://unidemo.dcloud.net.cn/api/news?column=title,author_name,cover,published_at',
          method: "GET",
          success: (res : RequestSuccess<UTSJSONObject[]>) => {
            if (res.statusCode == 200 && Array.isArray(res.data)) {
              this.jest_result = true
            } else {
              this.jest_result = false
            }
          },
          fail: () => {
            this.jest_result = false
          }
        });
      },
      jest_uts_module_invoked() {
        // #ifdef APP-ANDROID || APP-IOS || APP-HARMONY
        this.jest_result = false
        testInovkeRequest({
          success: (res : any) => {
            this.jest_result = true
          },
          fail: (err : any) => {
            this.jest_result = false
          }
        } as CommonOptions)
        // #endif
      },
      jest_respone_json_string() {
        uni.request({
          url: "https://request.dcloud.net.cn/api/http/contentType/text/json",
          success: (res : RequestSuccess<any>) => {
            this.jest_result = typeof res.data == "object"
          },
          fail: (e : RequestFail) => {
            this.jest_result = false
          }
        })
      },
      jest_respone_with_string_generics() {
        uni.request<string>({
          url: this.host + (methodMap['GET'] as string),
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res : RequestSuccess<string>) => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_respone_with_404_and_string_generics() {
        uni.request<string>({
          url: this.host + "/api/http/statusCode/404",
          method: "GET",
          timeout: null,
          sslVerify: false,
          withCredentials: false,
          firstIpv4: false,
          success: (res : RequestSuccess<string>) => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      }
    }
  }
</script>

<style>
  .uni-textarea {
    padding: 9px;
    font-size: 14px;
  }
</style>