react基础（十七）— axios

小徐今天学习了吗
147 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

前言

大家好呀，我是L同学。上篇文章中react基础（十六）— styled-components，我们学习了CSS-in-JS中流行的styled-components的基本使用。今天，我们学习下axios，如何发送网络请求。

axios介绍

我们在进行开发时，需要跟服务器打交道。在前端进行网络请求最常用的方案是使用axios。axios是目前前端使用非常广泛的网络请求库。axios的主要特点是在浏览器中发送XMLHttpRequest请求、在node.js中发送http请求、支持Promise API、拦截请求和响应、转换请求和相应数据等等。

axios的基本使用

axios支持多种请求方式，包括：

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

在开发中，我们在componentDidMount生命周期中拿到数据后进行进行更新。

import { PureComponent } from "react";
export default class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      products: []
    }
  }

  componentDidMount() {
    this.setState({
      products: [...this.state.products, ...res]
    })
  }

  render() {
    return (
      <div>
        App
      </div>
    )
  }
}

axios发送基本网络请求

axios发送基本网络请求，直接通过axios函数发送函数。

axios发送get请求。

    axios({
      url: 'https://httpbin.org/get',
      params: {
        name: 'haha',
        age: 19
      }
    }).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })

我们可以看到get请求发送成功。 image.png axios发送post请求。

    axios({
      url: 'https://httpbin.org/post',
      data: {
        name: 'xixi',
        age: 20
      },
      method: 'post'
    }).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })

我们可以看到post请求发送成功。

image.png

axios发送get/post请求

axios发送网络请求除了上述基本的方式，还可以这样发送get、post请求。

axios发送get请求。

    axios.get('https://httpbin.org/get', {
      params: {
        name: 'haha',
        age: 18
      }
    }).then(console.log)

我们可以看到get请求发送成功。

image.png axios发送post请求。

    axios.post('https://httpbin.org/post', {
      name: 'xixi',
      age: 20
    }).then(console.log)

我们可以看到post请求发送成功。 image.png

除了axios.get()、axios.post()，我们还可以通过axios.request()发送请求。上述我们说到的axios支持的多种请求方式本质上都是通过axios.request()发送网络请求。

async await

我们可以使用async、await发送网络请求。想要拿到错误信息，可以使用try...catch...进行包裹。

  async componentDidMount() {
    try {
      const result = await axios.get('https://httpbin.org/get', {
        params: {
          name: 'haha',
          age: 18
        }
      })
      console.log(result);
    } catch (err) {
      console.log(err);
    }
  }

多个请求合并

如果有多个网络请求，我们可以通过axios.all将多个请求合并。axios.all本质上使用了Promise.all。

  axios.all([request1, request2]).then(([res1, res2]) => {
    console.log(res1, res2);
  })

全局默认配置

如果有多个axios请求，它们的请求基地址相同，我们可以设置默认配置。默认配置可以设置baseURL、timeout、token等，那么每个axios请求都会使用这个默认配置。

axios.defaults.baseURL = 'https://httpbin.org'
axios.defaults.timeout = 5000
axios.defaults.headers.common['token'] = 'ahjhsdjfhsdka'

我们可以看到我们设置的全局默认配置。

image.png

创建实例

我们可以通过axios.create创建实例，自定义实例默认配置。

  const instance = axios.create({
    baseURL: 'http://baidu.com',
    timeout: 5000,
    headers: {
      
    }
  })

配置的优先级是这样子的。优先是使用请求的config参数配置，其次是实例的default中的配置，最后是创建实例时的配置。

axios拦截器

axios库中有一个特性是可以添加拦截器。，包括请求拦截器和响应拦截器。

请求拦截器：在发送请求时，请求被拦截。我们在什么时候可以使用请求拦截器呢？发送网络请求时，在页面中添加一个loading组件作为动画；某些网络请求要求用户必须登录，可以在请求中判断是否携带了token，没有携带token直接跳转到login页面；对某些请求参数进行序列化。

响应拦截器： 在响应结果中，结果被拦截。在响应拦截器中可以对结果进行二次处理，比如服务器中真正返回的数据其实是在response的data中；对于错误信息进行判断，根据不同的状态进行不同的处理。

avatar
文章
阅读
粉丝