简介

axios 是一个基于 Promise 的 HTTP 客户端，专门服务于浏览器和 node.js 。

功能

在浏览器中传送 XMLHttpRequests 请求在 node.js 中传送 http 请求支援 Promise API拦截请求和响应转换请求和响应资料自动转换 JSON 资料格式

建立Axios

使用JSON-Server建立一个数据库并且使用Axios对数据库中的数据进行操作。

Step 1 : 建立一个React Project并安装Axios

npm install axiosyarn add axios

Step 2 : 建立Axios的Component以提供呼叫

import _axios from "axios"const axios = (baseURL) => {    //建立一个自定义的axios    const instance = _axios.create({            baseURL: baseURL || 'http://localhost:3003', //JSON-Server端口位置            timeout: 1000,        });     return instance;}export {axios};export default axios();

Axios API实例

运用axios的API对JSON-Server数据库中的数据进行操作。

GET (取得资料)

import React from "react";import axios from "./axios";class App extends React.Component{    GET = async() => {        try         {            //取得数据库http://localhost:3003/posts的数据            const Data = await axios.get("/posts");             console.log(Data.data);        }         catch (error)         {            alert("GET Error!!");            }      };        render()    {        return(            <div className="get">                <button onClick={this.GET}>Get</button>            </div>        );    };};

当按下GET按钮后取得http://localhost:3003/posts的数据

POST (新增资料)

import React from "react";import axios from "./axios";class App extends React.Component{    constructor(props)    {        super(props);        this.state = {            id:"",            title : "",            author : ""        }    };    handleChange = (e) => {        //Step 1:取得输入的数值        const value = e.target.value;        //Step 2:取得输入的input名子        const name = e.target.name;        //Step 3:更改State数据        this.setState({            [name]:value        });    };    //-------------------------------------------------//    POST = () => {        //Step 1:取得state数据        const product = {...this.state};        //Step 2:新增到JSON-Server数据库中         axios.post("/posts",product);    };    //-------------------------------------------------//                render()    {        retrun(            <div className="post">                    <label>title</label>                    <textarea                       name="title"                       value={this.state.title}                       onChange={this.handleChange}                    />                    <label>author</label>                    <textarea                       name="author"                       value={this.state.author}                       onChange={this.handleChange}                    />                    <button onClick={this.POST}>POST</button>             </div>        );    };};

使用GET按钮来取得当前数据库数据以确认是否新增了新的数据到数据库中

PUT (更新资料)

import React from "react";import axios from "./axios";class App extends React.Component{    constructor(props)    {        super(props);        this.state = {            id:"",            title : "",            author : ""        }    };    handleChange = (e) => {        //Step 1:取得输入的数值        const value = e.target.value;        //Step 2:取得输入的input名子        const name = e.target.name;        //Step 3:更改State数据        this.setState({            [name]:value        });    };    //-------------------------------------------------//    PUT = () => {        //Step 1:取得state数据        const product = {...this.state};        //Step 2:更新指定JSON-Server数据库中指定的id数据        axios.put(`posts/${this.state.id}`,product)    };    //-------------------------------------------------//                render()    {        return(             <div className="put">                    <label>ID</label>                    <input                       type="text"                       name="id"                       value={this.state.id}                       onChange={this.handleChange}                    />                    <label>title</label>                    <textarea                       name="title"                       value={this.state.title}                       onChange={this.handleChange}                    />                    <label>author</label>                    <textarea                       name="author"                       value={this.state.author}                       onChange={this.handleChange}                    />                    <button onClick={this.PUT}>PUT</button>                </div>        );    }; };    

使用GET按钮来取得当前数据库数据以确认是否更新了指定id的数据

DELETE (删除资料)

import React from "react";import axios from "./axios";class App extends React.Component{    constructor(props)    {        super(props);        this.state = {            id:"",            title : "",            author : ""        }    };    handleChange = (e) => {        //Step 1:取得输入的数值        const value = e.target.value;        //Step 2:取得输入的input名子        const name = e.target.name;        //Step 3:更改State数据        this.setState({            [name]:value        });    };    //-------------------------------------------------//    Delete = () => {        const product = {...this.state};        axios.delete(`posts/${this.state.id}`,product)    };    //-------------------------------------------------//        render()    {        return(            <div className="delete">                    <label>ID</label>                    <input                       type="text"                       name="id"                       value={this.state.id}                       onChange={this.handleChange}                    />                    <button onClick={this.Delete}>Delete</button>            </div>        );    };   };    

指定要删除数据的id:

使用GET按钮来取得当前数据库数据以确认是否将指定id的数据删除

参考资料 :
GitHub-axios
axios 基本使用 & Config
Axios Crash Course | HTTP Library