一、Post

通式

 axios.post('api地址',待傳入的參數(shù))
   .then(function (response) {
      //handle success data
   })
    .catch(function (error) {
       //handle error satuation
       console.log(error)
   })
}

應(yīng)用

第二個(gè)參數(shù)第一種寫(xiě)法：直接傳字符串

  const posts_ = 'https://www.fastmock.site/mock/4f2f543c48ec3d334a328af2e83239e6/MockData/api/postDemo'

  const axios = require('axios');
   // 第一個(gè)參數(shù)是post接口地址，第二個(gè)參數(shù)是往post寫(xiě)入數(shù)據(jù)，這里是獲取表單的值
  axios.post(posts_, PostVal)
       .then(function (response) {
          //response.config.data 獲取表單值的地方
           console.log(response.config.data)
        })
    	.catch(function (error) {
           console.log(error)
    })

第二個(gè)參數(shù)的另一種寫(xiě)法：傳json格式的對(duì)象

  const axios = require('axios');
  axios.post('https://www.fastmock.site/mock/4f2f543c48ec3d334a328af2e83239e6/MockData/api/postDemo', {
   		"jsonrpc": "2.0",
        "method": "user.login",
        "params": {
            "PostVal": PostVal,
        },
        "id": 1,
        "auth": null
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

二、Get

通式

 axios.get('api地址')
   .then(function (response) {
      //handle success data
   })
    .catch(function (error) {
       //handle error satuation
       console.log(error)
   })
}

應(yīng)用

const getApi = () => {
        axios.get(api)
            .then(function (response) {
                //handle success data
                const result = response.data.data
                setUserName(result.userName);
                setEmail(result.email);
                setUserId(result.userId);
                setMsg(response.data.msg);
            })
            .catch(function (error) {
                //handle error satuation
                console.log(error)
            })
    }

三、報(bào)錯(cuò)提示：console.log(response)返回[object,object]

1. 用JSON.stringfy(response)將response對(duì)象轉(zhuǎn)為字符串，但是不好獲取里面的屬性；
   希望有其他更好的解決辦法

參考文章
axios 獲取post數(shù)據(jù)

四、完整代碼

import React, { useRef, useState } from 'react'
import axios from 'axios'
import styles from "./index.less"
export default () => {

    const [userName, setUserName] = useState()
    const [email, setEmail] = useState()
    const [userId, setUserId] = useState()
    const [msg, setMsg] = useState()
    const api = 'https://www.fastmock.site/mock/4f2f543c48ec3d334a328af2e83239e6/MockData/api/mock'

    const getApi = () => {
        axios.get(api)
            .then(function (response) {
                //handle success data
                const result = response.data.data
                setUserName(result.userName);
                setEmail(result.email);
                setUserId(result.userId);
                setMsg(response.data.msg);
            })
            .catch(function (error) {
                //handle error satuation
                console.log(error)
            })
    }

    const [PostVal, setPostValue] = useState();
    const postContent = useRef(null);

    const posts_ = 'https://www.fastmock.site/mock/4f2f543c48ec3d334a328af2e83239e6/MockData/api/postDemo'
    function postApi() {
        if (postContent.current.value.trim() !== '') {
            //the second program uses to get post content
            axios.post(posts_, PostVal)
                .then(function (response) {
                    //response.config.data 獲取表單值的地方
                    console.log(response.config.data)
                })
                .catch(function (error) {
                    console.log(error)
                })
        }
        else {
            alert('please input something!')
        }

    }

    function handleSubmit() {
        if (postContent.current.value.trim() !== '') {
            return setPostValue(postContent.current.value.trim());
        }
        alert('please input something!')
    }

    return (
        <div className={styles.InterFace}>
            <h3>Get 請(qǐng)求獲取接口數(shù)據(jù)</h3>
            <button type="button" onClick={getApi}>Get api</button>
            <div>
                <p> <b>userName: </b>{userName}</p>
                <p><b>userId: </b>{userId}</p>
                <p><b>email: </b>{email}</p>
                <p><b>msg: </b>{msg}</p>
            </div>
            <h3>Post 請(qǐng)求獲取接口數(shù)據(jù)</h3>
            <div>
                <input type="text" ref={postContent} />
                <p><b>post value: </b>{PostVal}</p>
                <button type="button" onClick={handleSubmit}>Submit</button>

                <button type="button" onClick={postApi}>Post api</button>
            </div>
        </div>
    )
}

五、自造測(cè)試接口

fastmock
使用步驟參考官方文檔教程