Vue 封装vue-axios

安装

# 只安装vue-axios，适合vue生态圈（推荐）
npm install --save vue-axios
1
2

创建

创建根目录utils文件夹，并且创建request.js文件

import axios from 'axios'

//创建一个axios的对象
const instance = axios.create({
    baseURL: "http://baidu.com", //baseURL会在发送请求时拼接在url参数前面，如遇跨域请设置vue.config.js
    timeout: 5000
})

//请求前拦截器
//所有的网络请求都会先走这个方法，我们可以在他里面为请求添加一些自定义的内容
instance.interceptors.request.use(
    function(config) {
        console.group('全局请求拦截');
        console.log(config);
        console.groupEnd();
        //token是跟服务器约定好的
        config.headers.token = "123456";
        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 get4(page, per) {
    return instance.get("/tongyao_xdp/core/goods/query?goods_id=4");
}
export function post5(data) {
    return instance.post("/tongyao_xdp/core/goods/query?goods_id=5", data)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

vue中使用

<template>
    <div>
        <button @click="getHandle">发送get请求</button>
        <button @click="getHandle4">发送get4请求</button>
        <button @click="getHandle5">发送get5请求</button>
    </div>
</template>

<script>
import axios from 'axios'
//注意引用request.js文件中的get，post方法
import {get4,post5} from '@/utils/request.js'
export default {
    name: 'App',
    methods:{
        getHandle(){
            axios.post("/api/tongyao_xdp/core/goods/query?goods_id=3",{
                headers:{}
            }).then(res=>console.log(res));
        },
        getHandle4(){
            // 也可以这样写：get(3,2).then(res=>console.log(res));
            return get4(3,2).then(
                (res)=>{
                    console.log(res);
                },
                (err) => {
                    console.log(err);
                }
            )
        },
        getHandle5(){
            post5({"userName":"zhangsan","password":"123456"}).then((res)=>{
                    console.log(res);
                },(err) => {
                    console.log(err);
                }
            )
        }

    }
}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

具体参考文章：https://blog.csdn.net/weixin_46443403/article/details/124465888