当前位置: 博客 /  ReactJs  / 在React项目中使用axios

安装

npm

npm install axios --save

基本用法

GET请求

axios.get(URL)
  .then(res => {
    // 此处对返回值进行处理
    console.log(res)
  })

POST请求

axios.post(URL, body)
  .then(res => {
    // 此处对返回值进行处理
    console.log(res)
  })

axios.get()和axios.post()请求的返回值是Promise对象

查看GET与POST请求对比

async/await异步请求

异步需要使用到async/await,以GET请求举例:

async function getTest() {
  return await axios.get(URL)
    .then(res => {
      console.log(res)
    })
}

以上方法在axios的介绍页有更多举例及详细介绍。

在React项目中使用

在组件内部使用

class Login extends React.Component {
  onChange(key,val){
    this.setState({
      [key]:val
    })
  }

  login(){
    let username = this.state.username,
        password = this.state.password
    axios.post(URL, { username, password })
      .then(res => {
        // 此处对返回值进行处理
        console.log(res)
      })
  }

  render() {
    return (
      <form>
        <label>用户名:
          <input
            type="text"
            name="user"
            onChange = {v => this.onChange('username', v)}
          />
        </label>
        <label>密码:
          <input
            type="password"
            name="password"
            onChange = {v => this.onChange('password', v)}
          />
        </label>
        <input type="submit" value="登录" onClick={this.login}>
      </form>
    )
  }
}

外部传入

  1. 父组件定义

在父组件定义login函数,子组件调用时使用this.props.login

  1. redux中定义

同步:

export function login( { username, password } ){
    return dispatch => {
    axios.post('/login', {
      username,
      password
    })
      .then(res => {
        if (res.status === 200 && res.data.code === 0) {
          dispatch(loginSuccess(res.data.data))
        } else {
          dispatch(errorMsg(res.data.msg))
        }
      })
  }
}

异步:

export function getUserlist () {
  return async function(dispatch) {
    await axios
      .get('/userlist')
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          dispatch(getUserlistSuccess(res.data.data))
        } else {
          dispatch(errorMsg(res.data.msg))
        }
      })
      .catch((err) => {
        console.log(err);
      })
  }
}

参考资料

axios

- END -