封装一套好用的http请求方法？逐步解析请求封装[根据Axios]_开发环境和生产环境http的封装

• 相信大家在组织大型项目的时候都不会直接去使用原生的请求，哪怕是axios，那样无论修改起来还是使用起来都不够方便
• 在携带token 响应拦截 更换服务器地址等方面，封装请求具有明显优势
• 话不多说 直接开写

请求封装

• 逐步分析版

// 引入axios
import axios from 'axios'

const service = axios.create({
	// 服务器地址  我的配置方式 可以在 .env.development（开发环境） .env.production（生产环境）两个文件中进行配置
    baseURL: process.env.VUE_APP_BASE_API,
    // baseURL: "www.xxx.com",  如果不使用上面的方式 你大可直接以字符串的形式配置
    // 请求超时时间 如果服务器不是很快 尽可能设置的大一些
    timeout: 5000
})

// 请求拦截器 （对请求发送之前的阶段进行拦截 执行此方法后继续执行）
service.interceptors.request.use(
	//成功回调
    config => {
    	// 这里可以修改请求的很多东西 比如请求方法 你可以打印config尝试一下
		// 我的token存在了sessionStorage 但不是每个人都这么做 需要你根据自己的方式进行判断
        if (sessionStorage.getItem('login_token')) {
        	// 具有token的情况下 对请求头(headers)增加token字段 值为保存好的token
            config.headers['token'] = sessionStorage.getItem('login_token')
        }
        // 将请求返回 继续执行
        return config
    },
    // 失败回调 抛出错误
    error => {
        console.log(error);
        return Promise.reject(error)
    }
)

// 响应拦截器	(请求发送到服务器后 返回响应数据 对响应数据传递到页面之前进行响应拦截)
service.interceptors.response.use(
	//成功回调
    response => {
    	// 首先取其中的data出来 因为原始的 response 中大多数据用不到 多数情况下data中才是要用到的东西
        const res = response.data;
		// 对code进行判断 视自己情况而定
        if(res.code === 203){
        	// 我的203指的是未登录 你可以参考我的上一篇文章 使其直接退回到登录页面
        	// 这里的操作只是返回错误信息
            return Promise.reject(new Error('未登录'))
        }else if(res.code !== 200) {
        	// 返回错误信息 (注意 res.message 是我的错误信息 具体错误信息的字段名视你的后端情况而定)
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
        	// 其他情况下(code==200) 直接返回数据即可
            return res
        }
    },
     // 失败回调 抛出错误
    error => {
        console.log('err' + error)
        return Promise.reject(error)
    }
)
// 暴露封装对象
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

• 方便复制版 大佬直接从这里copy

import axios from 'axios'

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000
})

service.interceptors.request.use(
    config => {

        if (sessionStorage.getItem('login_token')) {
            config.headers['token'] = sessionStorage.getItem('login_token')
        }
        return config
    },
    error => {
        console.log(error);
        return Promise.reject(error)
    }
)

service.interceptors.response.use(
    response => {
        const res = response.data;
        if(res.code === 203){
            return Promise.reject(new Error('未登录'))
        }else if(res.code !== 200) {
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error)
        return Promise.reject(error)
    }
)

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

请求方法封装

// 首先导入上面封装好的js文件
import request from './request'

// 直接在导出对象中定义方法
export default {
    Login(data) {
        return request({
            url: '/login',
            method: 'post',
            data
        })
    },
    xxx(){
		以此类推.....
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

使用

• 示例在Vue项目中调用

    // 可以这样导入 或者直接在main.js中挂载到vue对象
    import ApiList from "../../util/ApiList";
    export default {
        name: "about",
        created() {
        	// 直接调用即可
            ApiList.Login({username:"xxx",password:"xxxx"}).then(res => {
                this.xxx = res
            })
        }
    }
1
2
3
4
5
6
7
8
9
10
11

• 挂载方法

main.js

import ApiList  from "./util/ApiList";
Vue.prototype.$api = ApiList;
1
2

xx.vue

this.$api.Login({username:"xxx",password:"xxxx"}).then(res => {
	this.xxx = res
})
1
2
3

如果对您有帮助 三连支持 下期再见

• 下期预告
• Uniapp的请求封装
• 微信小程序的请求封装