axios 简单使用

安装 axios yarn add axios

对 axios 进行封装

配置文件的封装

jsx

// 在这个文件定义 axios 的配置，不仅是 react 可以用，vue 或者别的项目也应该这样做
const devBaseUrl = 'https://httpbin.org'
const proBaseUrl = 'xxxx'

export const BASE_URL =
  process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl

export const TIMEOUT = 5000

主要内容的封装

jsx

import axios from 'axios'

// 导入axios的配置
import { BASE_URL, TIMEOUT } from './config'

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT
})

// 还可以手动添加拦截器
// 请求拦截
instance.interceptors.request.use((config) => {
  return config
})
// 响应拦截
instance.interceptors.response.use((res) => {
  return res.data
})
export default instance

使用

jsx

import React, { PureComponent } from 'react'

// 将axios进行封装之后，在外部直接使用就可以了
import request from './serviece/request'

export default class APP extends PureComponent {
  componentDidMount() {
    request({
      url: '/get',
      params: {
        name: 'kobe',
        age: 18
      }
    }).then((res) => {
      console.log(res)
    })
  }

  render() {
    return <>APP</>
  }
}

axios 简单使用 ​

axios 简单使用