React中axios的简易封装

在react开发中，用的最多的就是axios这个插件库了，下面展示下我自己简易封装的axios

创建一个service文件夹，里面专门用来放网络请求的东西

在里面创建一个config.js文件

const devBaseURL = "https://httpbin.org"
const proBaseURL = "https://product.org"

export const BASE_URL = process.env.NODE_ENV === 'development'?devBaseURL :proBaseURL

export const TIMEOUT = 5000

我们实际开发中，肯定开发是在测试服务器上开发，然后开发完毕再转到正式服务器，devBaseURL就是代码测试服务器

在创建一个request.js文件

import axios from 'axios'

import {BASE_URL,TIMEOUT} from './config'
const instance = axios.create({
   baseURL:BASE_URL,
   timeout:TIMEOUT
})

axios.interceptors.request.use(config =>{
  // 1.发送网络请求时候,在界面的中间位置显示loading组件

  // 2.某一些请求用户必须携带TOKEN,如果没有携带，那么直接跳转到登陆页面

  // 3.params/data序列化的操作,qs.stringfly
  console.log('请求被拦截')
  return config
},err =>{

})

axios.interceptors.response.use(res =>{
  return res.data
},err =>{
  if(err && err.response){
    switch (err.response.status){
      case 400:
        console.log('请求错误')
        break;
      case 401:
        console.log('未授权访问')
        break
      default:
        console.log('其他错误信息')    
    }
  }
  return err
})

export default instance

那我们在组件中如何使用呢？？

import request from './service/request'

 request({
    url:'/get',
    params:{
      name:'lsh'
    }
  }).then((res)=>{
    console.log(res)
  }).catch((err)=>{
    console.error(err)
  })