首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >反应,Axios,如何从3 url切换请求url

反应,Axios,如何从3 url切换请求url
EN

Stack Overflow用户
提问于 2020-05-10 11:40:46
回答 1查看 468关注 0票数 0

axios api url

我在使用php api的React项目中使用axios。我想测试3个api3,比如https//:api3 1,https//:api3 12,https//:api3 3,我想通过液滴切换这3个api3(选择选项)

你能给我一些建议或指导吗,谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-10 17:18:08

逻辑很简单。您有一个字符串数组- api。

呈现select标记,并从数组中填充option的子map

使用onChnage侦听用户更改选择,获取值并使用axois调用API。

我添加了一个pre来显示结果(以证明要点)

代码语言:javascript
运行
复制
import React, { useState } from "react";
import axios from "axios";
import "./styles.css";

const apis = [
  "https://reqres.in/api/users?page=1",
  "https://reqres.in/api/users?page=2",
  "https://reqres.in/api/users?page=3"
];

export default function App() {
  const [response, setResponse] = useState("");
  const onChange = async e => {
    const url = e.target.value;
    const data = await axios.get(url);
    setResponse(JSON.stringify(data, null, 2));
  };

  return (
    <div className="App">
      <select onChange={onChange}>
        <option key={-1}>Choose API</option>
        {apis.map(api => (
          <option key={api}>{api}</option>
        ))}
      </select>
      <hr />
      Response:
      <pre style={{ textAlign: "left" }}>{response}</pre>
    </div>
  );
}

https://codesandbox.io/s/wandering-dust-ljr2c?file=/src/App.js

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61711360

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档