axios的普通请求、封装请求、拦截器

一、在你需要请求数据的组件中写入

methods:{

        //网络封装axios请求

        MYgetaxios(){            

            //多用于获取服务器的数据

            get('/api-itc/grades',{

                params:{},//这里的parmas是传递给服务器的数据

                headers:{}

            }).then(res=>

            //this.data = res.data.result,

            console.log(res.data.results))

        },

        //普通axios请求

        getaxios(){

            axios.get('https://api.apiopen.top/api/sentences',{

                params:{},

            }).then(res=>

            console.log(res.data.result))

        }

},

二、新建一个文件夹utils下新建一个文件request.js文件

import axios from 'axios'

//创建一个axios对象

    const instance = axios.create({

        baseURL:'https://yx.c520.xyz',//调用封装好的axios请求时，baseURL会自动拼接到url前面

        timeout:6000

    });

//请求拦截

//发送网络请求之前先走这个函数

instance.interceptors.request.use(

    function(config){

        console.group('全局请求拦截')

        console.log(config)

        console.groupEnd()

        //在发送网络请求之前添加请求头

        config.headers.token = '你的token值'

        return config;

    },

    function(err){

        return Promise.reject(err);

    }

)

//响应拦截

//服务器返回数据之后都会先走这个方法

instance.interceptors.response.use(

    function(response){

        console.group('全局响应拦截')

        console.log(response)

        console.groupEnd()

        return response;

    },

    function(err){

        return Promise.reject(err);

    }

)

export function get(url,params){

    return instance.get(url,{

        params

    });

}

export function post(url,data){

    return instance.get(url,data);

}

export function del(url){

    return instance.delect(url);

}

export function put(url,data){

    return instance.put(url,data);

}