VUE前端Fetch請求調用第三方接口

Fetch官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

基於Fetch請求方式，結合我的業務需求給出例子。

1、對於get請求

this.ipAddress是ip地址和端口，比如http://192.168.3.45:8080,產品模式下可以不需要端口，因為是默認8080的；但是開發環境下是需要端口的，有可能是我開發環境的默認端口不是8080造成的

 fetch(
        `${this.ipAddress}/api/beast/zhcx/zhcxIndex/?ipObj=${this.hostIpObj.ip}&page=${page}&size=${this.pageSize}`,
        {
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
          method: "GET",
          mode: "cors",
        }
      )
        .then((res) =>
          res.status === 200
            ? res.json()
            : res.json().then((err) => {
                throw err;
              })
        )
        .then((rst) => {
          this.allItems = rst.items;
          this.total = rst.total;
        }) .catch((e) => this.$message.error(e.message));

如果不想直接拼接參數，可以如下面這樣，可以防止url注入

 const ur = new URL(
        `${this.ipAddress}/api/beast/zhcx/zhcxIndex/`,
        window.location.href
      );
 ur.searchParams.append("ipObj", this.hostIpObj.ip);
 ur.searchParams.append("page", page);
 ur.searchParams.append("size", this.pageSize);
 fetch(ur, {
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "GET",
        mode: "cors",
      })
        .then((res) =>
          res.status === 200
            ? res.json()
            : res.json().then((err) => {
                throw err;
              })
        )
        .then((rst) => {
          //獲取數據
        }) .catch((e) => {
          this.$message.error(e.message);
        });

 

如果說第三方接口API也是自己寫的話，下面是controller例子

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController("beast.c.zhcx")
@RequestMapping("/api/beast/zhcx")
public class ZhcxsController extends KhlbsController {
    @GetMapping("/zhcxIndex")
    public Pagination<Zhcx> zhcxIndex(@RequestParam(value = "ipObj") String ip,
                                      @RequestParam(value = "page") int page,
                                      @RequestParam(value = "size") int size）{}
}

注意@CrossOrigin(origins = "*", maxAge = 3600)這個注解很重要，要不然會出現跨域報錯。

我在開發環境下需要把application.properties的server.address=127.0.0.1改成server.address=0.0.0.0，要不然也會報錯。

如果server.address=127.0.0.1則會報錯

2、post請求

  const data = {
        headers: {
          "Content-Type": "application/json;charset=utf-8",
        },
        method: "POST",
        mode: "cors",
      };
      var body = {
        dws: this.dws,
      };
      data.body = JSON.stringify(body);
      fetch(
        `${this.ipAddress}/api/beast/zhcx/zhcx2Index/?ipObj=${this.hostIpObj.ip}`,
        data
      )
        .then((res) =>
          res.status === 200
            ? res.json()
            : res.json().then((err) => {
                throw err;
              })
        )
        .then((rst) => {
          this.allItems = rst;
          this.total = this.allItems.length;

        }) .catch((e) => this.$message.error(e.message) );