React 中使用axios封装get post请求

我们在使用create-react-app初始化项目后，一般需要使用axios来请求后台接口，所以今天我们就做一个对get，post封装好的axios请求。
初始化项目后，我们在src目录下创建utils文件夹，内包含api.js和http.js两个文件。

api.js 主要包含我们请求后台的接口地址，简单举个例子：

let api = {
    home: '/api/home/content',
    login: `/api/sso/login`,
    ...
}

export default api

接下来，就是封装axios的http.js：首先我们需要安装axios的依赖：

yarn add axios -D or npm i axios -D

安装完成依赖之后，就需要在http.js中引入：

import axios from 'axios';

let rootUrl = 'https://192.168.0.125:8085';                  // 你的域名

// get post请求封装
export function get(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(rootUrl + url, {params: param}).then(response => {
            resolve(response.data)
        }, err => {
            reject(err)
        }).catch((error) => {
            reject(error)
        })
    })
}

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(rootUrl + url, params).then(response => {
            resolve(response.data);
        }, err => {
            reject(err);
        }).catch((error) => {
            reject(error)
        })
    })
}

简单封装完get post请求之后，我们需要在react的原型链上，绑定get和post方法，修改 src/index.js 文件：

import React, { Component } from 'react';
import { get, post } from './utils/http';
import api from './utils/api';

// 注意：Vue 框架是在Vue.prototype原型上绑定，而react不是在React.prototype原型上绑定，而是在Component上绑定

Component.prototype.get = get;
Component.prototype.post = post;
Component.prototype.api = api;

调取接口：创建components文件夹，内含Home.jsx和Login.jsx两个文件：
Home.jsx:

import React, { Component } from 'react'

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    componentDidMount() {
        this.home()
    }
    home = () => {
        this.get(`${this.api.home}`, '').then( res => {
            console.log(res)
        })
    }
    render() { 
        return (
            <div>
                <h1>Home页面</h1>
            </div>
        );
    }
}
 
export default Home;

import React, { Component } from 'react'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '18518150000',
            password: 123456
        }
    }
    login = () => {
        this.post(`${this.api.login}?username=${this.state.username}&password=${this.state.password}`, '').then( res => {
            console.log(res)
        })
    }
    changeName = (event) => {
        this.setState({
            username: event.target.value
        })
    }
    changepwd = (event) => {
        this.setState({
            password: event.target.value
        })
    }
    render() { 
        return (
            <div>
                <h1>Login</h1>
                <input type="tel" value={this.state.username} maxLength="11" onChange={this.changeName} /><br/>
                <input type="password" value={this.state.password} onChange={this.changepwd} /><br/><br/>
                <button onClick={this.login}>登录</button>
            </div>
        );
    }
}
 

{/*  input 长度控制 
    <input type="text"  maxLength="10" />   // 可以
    <input type="number"  maxLength="11" />  // 没有效果
    <input type="number" οninput="if(value.length>5) value=value.slice(0,5)" /> // js控制，可以
    <input type="tel"  maxlength="11" />  // tel类型，可以 
*/}

export default Login;

到此，就完成了axios的get post的简单封装。

最后编辑于：2020.09.23 14:38:21