2020-12-03

axios的拦截接口

instance.interceptors.request.use(函数一,函数二) —>(config,err)
instance.interceptors.response.use(函数一,函数二) —>(res,err)

import axios from 'axios'
export function request(config) {
    // 1.创建axios实列
    const instance = axios.create({
            baseURL: 'http://152.136.185.210:7878/api/m5',
            timeout: 5000
        })
        // 2.axios拦截器的使用
        // 1.请求拦截
    instance.interceptors.request.use(config => {
            //config中的内容不符合服务器需求
            //希望在界面中显示动画
            // console.log(config);
            return config
        }, err => {
            console.log(err);
        })
        // 2.响应拦截
    instance.interceptors.response.use(res => {
        console.log(res);
        console.log(res.data);
        return res.data
    }, err => {
        console.log(err);
    })

    // 3. 发送网络请求

    return instance(config)
}

//其他文件中使用
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    render: h => h(App)
})
import { request } from './network/request'
request({
    url: '/home/data',
    params: {
        type: 'pop',
        page: 1
    }
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})