学习Axios，调用了一个飞书的API（Day：16）

任务：学习Axios

进度：50%

Demo链接： https://github.com/XJQ124/Axios-test

1、什么是Axios？

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

安装：

$ npm install axios

2、学习官网内容

这个部分不打出来了，参考官网链接： Axios中文官网链接： https://www.axios-http.cn/

3、Demo内容

链接到飞书的Api，发送POST请求 App.js部分

import axios from 'axios';
import './App.css';
import React, { useEffect } from 'react';

function App() {
  useEffect(()=>{
    const accessToken = 'u-e6bTKeImZex8F2Hf7A7C63446z30gkN9OMG01hME83cc'
    const keyword = '上海研发中心'; // 替换为你的搜索关键词

    const apiUrl = '/open-apis/contact/v3/departments/search?page_size=20';

    // 构建请求头
    const headers = {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${accessToken}`,
    };

    // 构建请求体
    const requestBody = {
      query: keyword,
    };

    // 发送 POST 请求
    axios.post(apiUrl, requestBody, { headers })
      .then(response => {
        // 使用条件判断确保 response 和 response.data 不为空
        if (response && response.data) {
          console.log('Search Results:', response.data.data);
        } else {
          console.error('Error: Invalid response format');
        }
      })
      .catch(error => {
        // 错误处理
        console.error('Error:', error.response ? error.response.data : error.message);
      });
  }, []);

  return (
    <>
    <div>
      这是axios的test
    </div>
    </>
  )
}

export default App;

4、配置代理

参考网址： https://create-react-app.dev/docs/proxying-api-requests-in-development/ 由于本地的localhost地址和api所涉及的域名不同，所以需要配置代理 setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/open-apis',
        createProxyMiddleware({
            target: 'https://open.feishu.cn',
            changeOrigin: true,
        })
    );
};

这样，就可以调用飞书的api接口了。

然后，明天的任务是再看看拦截器和防抖节流的技术

XJQ124 / Some-notes