react--axios响应拦截

目录结构

前言

直接调用axios发起请求，每次都需要对返回结果进行判断（如返回状态码，返回信息），然后对成功和失败两种情况进行不同的处理,每次请求都有很多冗余代码，可以对响应结果封装一层

import axios from "axios"

axios.get(url).then(res => {

    if ( res.status===200) {
        // do something success
    } else {
       // do something error
    }
})

响应拦截

interceptors.js

import _axios from "axios"

//设置baseURL
const axios = _axios.create({
    baseURL: '/api',
});

// 响应拦截处理
axios.interceptors.response.use(
    response => {
        return Promise.resolve(response.data)
    },
    error => {
        return Promise.reject(error.response)
    }
)

export default axios

重新请求

import React ,{useEffect,useState}from 'react';
import ReactDOM from 'react-dom';
import axios from './interceptors'



 function App() {

  const [msg,setMsg]=useState("")

 
  useEffect(()=>{
    axios.get("list.json").then(data=>{
      setMsg(data.message)
    })
  },[])
  
 return msg
}



ReactDOM.render(<App />, document.getElementById("root"));

list.json

{
  "success": true,
  "result": {
    "list":[
      {
        "id": 1,
        "name": "冷月心",
        "age":18,
        "like": "coding"
      }
    ]
  },
  "message": "请求成功"
}