# Vue项目用axios做request封装

# 一、axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。用法demo: ①、get请求

axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 1 2 3 4 5 6 7 ①、post请求

axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 1 2 3 4 5 6 7 8 9 10 ①、执行多个并发请求

function getUserAccount() { return axios.get('/user/12345'); }

function getUserPermissions() { return axios.get('/user/12345/permissions'); }

axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 })); 1 2 3 4 5 6 7 8 9 10 11 12 还可以通过向axios传递相关配置来创建请求，如下：

// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });

# vue中引入axios
首先安装axios

npm install axios -- save

然后在
```
src
```
1
文件夹下创建一个名为
```
utils
```
1
文件夹, 在utils文件夹下创建一个
```
request.js
```
1
的
```
js
```
1
文件

image.png

然后进行import引入

import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'

1
2
3

接着创建实例

const service = axios.create({
    timeout: 7000, // 超过7秒提示超时
    baseUrl: 'https://www.baidu.com'
})

1
2
3
4

然后设置请求拦截器

// 请求拦截器
service.interceptors.request.use(
    config => {
        if(localStorage.token) {
            config.headers.token = localStorage.token;
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)

1
2
3
4
5
6
7
8
9
10
11
12
13

然后设置响应拦截器注: 响应去判断后台返回的状态码, 是要你们自己去跟后台去协商, 是什么字段, 协商好才能写

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 接收后台参数状态
        const res = response.data;
        if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
            return res;
        }else {
            let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('拦截器打印错误:', res);
            // 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知错误')
            );
        }
    },
    error => {
        console.log('服务器错误信息:', error);
        if(error.response) {
            // error.response有错误信息,是接口错误,不是取消请求
            // 获取错误码,弹出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登录过期,请重新登录')
                );
            }
            Message({
                message: '服务器繁忙, 请稍后再试!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消请求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;

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
48
49
50

完整的request.js文件

import axios from 'axios'
import {Message} from 'element-ui' // 项目用的element ui
import router from '../router'

const service = axios.create({
    timeout: 7000, // 超过7秒提示超时
    baseUrl: 'https://www.baidu.com'
})

// 请求拦截器
service.interceptors.request.use(
    config => {
        if(localStorage.token) {
            config.headers.token = localStorage.token;
        }
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject(error);
    }
)

// 响应拦截器
service.interceptors.response.use(
    response => {
        // 接收后台参数状态
        const res = response.data;
        if(res.code == 20000 || res.status == 200 || res.success || res.ErrorCode == 20000) {
            return res;
        }else {
            let message = (res.error && res.error.message) || res.message || res.msg || '未知错误';
            Message({
                message,
                type: 'error',
                duration: 5 * 1000
            });
            console.log('拦截器打印错误:', res);
            // 这里可以设置后台返回状态码是500或者是其他,然后重定向跳转
            // if(res.ErrorCode == 500) {
            //     router.push('/login')
            // }
            return Promise.reject(
                new Error(res.message || (res.error &&res.error.message) || '未知错误')
            );
        }
    },
    error => {
        console.log('服务器错误信息:', error);
        if(error.response) {
            // error.response有错误信息,是接口错误,不是取消请求
            // 获取错误码,弹出提示信息,reject()
            let code = error.response.status;
            if(res.code == 401) {
                // router.push('/login');
                return Promise.reject(
                    new Error('登录过期,请重新登录')
                );
            }
            Message({
                message: '服务器繁忙, 请稍后再试!  ' + code,
                type: 'error',
                duration: 3 * 1000
            });
            return Promise.reject(error.message);
        }else {
            // 是取消请求
            // 直接reject
            return Promise.reject(error.message);
        }
    }
)
export default service;

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

最后在
```
src
```
1
文件夹下创建
```
api
```
1
文件夹,在
```
api
```
1
文件夹下创建一个
```
api.js
```
1
的
```
js
```
1
文件

image.png

然后import引入我们的request方法

import request from '@/utils/request'

在里面定义baseUrl

const baseUrl = 'https://www.baidu.com';

最后去写一个接口请求方法

export function login(data) {
    return request({
        url: baseUrl + `/admin/user/login`,
        method: 'post',
        data
    })
}

1
2
3
4
5
6
7

完整的api.js文件

import request from '@/utils/request' // 引入封装的request.js文件

const baseUrl = 'https://www.baidu.com'; // 设置环境接口的域名

// 暴露出我们的接口请求,export导出
export function login(data) {
    return request({
        url: baseUrl + `/admin/user/login`,
        method: 'post',
        data
    })
}

1
2
3
4
5
6
7
8
9
10
11
12

然后我们去请求接口先创建一个login.vue文件

<template>
    <div class="login">
        <div class="login-box">
            <div class="login-header">欢迎登录个人知识库</div>
            <div class="account-number">
                <span class="from-label">账号</span>
                <el-input v-model="user.account" placeholder="请输入用户账号"></el-input>
            </div>
            <div class="account-psd">
                <span class="from-label">密码</span>
                <el-input v-model="user.PassWord" placeholder="请输入用户密码"></el-input>
            </div>
            <div class="account-footer">
                <el-button type="primary" @click="handleSubmit">登 录</el-button>
                <span class="forget-pwd" @click="handleForgetPwd">忘记密码?</span>
            </div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/api'; // 引入我们的api接口文件,花括号里面是我们暴露出来的login接口方法
export default {
    data() {
        return {
            user: {}
        }
    },
    created() {

    },
    methods: {
        // 登录
        handleSubmit() {
            login({
                UserName: this.user.account,
                PassWord: this.user.PassWord
            }).then(res => {
                console.log(res)
                // this.$alert('恭喜你登录成功了,但是我只写了这一个网页,要不你再登录一下?', '', {
                //     confirmButtonText: '确定'
                // });
                this.$message.success('登录成功');
                this.$router.push({
                    name: 'layout'
                })
            })
        },
        // 忘记密码
        handleForgetPwd() {
            this.$alert('请先注册', '', {
                confirmButtonText: '确定'
            });
        }
    }
}
</script>

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
48
49
50
51
52
53
54
55
56
57

# 封装的意义

axios封装的好处是统一处理，提高效率，便于维护。

你可以像下面一样这么使用axios请求接口

axios.get(``'http://localhost:10086/user?ID=12345'``)`` ``.then(response => {``  ``//成功后的操作...`` ``})`` ``.``catch``(error => {``  ``//失败后的操作...`` ``});

但是当接口请求多起来，需求多起来的时候，在项目中每个需要接口请求的地方写一遍这样的代码，这样就会产生很多重复性的代码，降低我们的开发效率和提高维护成本。

自定义实例默认值

const instance = axios.create({`` ``baseURL: ``'https://api.example.com'``});

请求的config参数

axios({   
method:'get',   
url:'http://bit.ly/2mTM3nY',   
responseType:'stream' }).then(function(response) {   response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });
axios({  ``method:``'get'``,  ``url:``'http://bit.ly/2mTM3nY'``,  ``responseType:``'stream'` `}).then(``function``(response) {  response.data.pipe(fs.createWriteStream(``'ada_lovelace.jpg'``)) });

1
2
3
4
5

# axios实例配置

设置BaseUrl

baseUrl一般有分为生产、开发、测试等多个地址，我们可以弄一个config.js进行存放，如果是vue或react我们可以新建env等文件进行存放，下面的baseUrl是使用react的环境变量的。

设置timeout请求超时的时间
设置数据请求的格式Content-Type(有 application/x-www-form-urlencoded、multipart/form-data、application/json...)等等

import axios from 'axios'

export const request = createAxiosInstance()

完整代码

import axios from 'axios'

export const request = createAxiosInstance()

function createAxiosInstance () { const instance = axios.create({ baseURL: process.env.REACT_APP_BASE_URL, timeout: 5000, headers: { // 可定义统一的请求头部 post: { 'Content-Type': 'application/json' } ... } }) // 添加请求拦截器(在发送请求之前做些什么) instance.interceptors.request.use((config) => { //可添加开启loading效果的函数 loading.open()
//token 存在就添加到请求头里 token && (config.headers.Authorization = token) // 过滤请求参数中的 null undefined ''的函数 cleanObject() return config }) // 添加响应拦截器(对响应数据做点什么) instance.interceptors.response.use((response) => { //可添加关闭loading效果的函数 loading.close()
//解构出返回结果的数据 const res = response.data //对自定义code码进行判断,将成功的数据返回出去 const validateStatus = /^(2|3)\d{2}$/ //code为2或3开头的视作请求成功 if (validateStatus.test(res.code)) { return res } //判断失败的code码并作出提示等操作 if (res.code === 401) { message.error(res.msg) } else { message.warning(res.msg) } return Promise.reject(res) }, (error) => { loading.close() //可添加关闭loading效果的函数 if (error.response.status === 401) { message.error('token失效，请重新登录！') removeStorageToken() setTimeout(() => { window.location.href = '/login' }, 2000) } else { if (!window.navigator.onLine) { message.warning('网络异常，请检查网络是否正常连接') } else if (error.code === 'ECONNABORTED') { message.warning('请求超时') } else { message.warning('服务器异常，请联系管理员') } } return Promise.reject(error) // 将错误继续返回给到具体页面 } )

return instance }

← Vue之动态Loading 前端踩坑记录 →

# Vue项目用axios做request封装

# 一、axios

# vue中引入axios

# 封装的意义

# axios实例配置