axios的处理链流程:添加请求拦截器、添加响应拦截器-蒲公英云

axios的处理链流程:添加请求拦截器、添加响应拦截器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios的处理链流程</title>
</head>
<body>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script>
    //添加请求拦截器(回调函数)
        //添加请求拦截器1
        axios.interceptors.request.use(
            config => {
                console.log('request interceptors1 succeed')
                return config;
            },
            error => {
                console.log('request interceptors1 failure')
                return Promise.reject(error);
            }
        )
        //添加请求拦截器2
        axios.interceptors.request.use(
            config => {
                console.log('request interceptors2 succeed')
                return config;
            },
            error => {
                console.log('request interceptors2 failure')
                return Promise.reject(error);
            }
        )
    //添加响应拦截器
        //添加响应拦截器1
        axios.interceptors.response.use(
            response => {
                console.log('response interceptors1 succeed')
                return response;
            },
            error => {
                console.log('response interceptors1 failure')
                return Promise.reject(error)
            }
        )
        //添加响应拦截器2
        axios.interceptors.response.use(
            response => {
                console.log('response interceptors2 succeed')
                return response;
            },
            error => {
                console.log('response interceptors2 failure')
                return Promise.reject(error)
            }
        )
    axios.defaults.baseURL = 'http://localhost:3000'
    axios({
        url: '/posts',
        methods: 'GET'
    })
    .then((response)=>{
        console.log('axios接口请求成功,打印data',response.data)
        }
    )
    .catch((error)=>{
        console.log('axios接口请求失败,打印message',error.message)
    })
</script>
</html>