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": "请求成功"
}