我是靠谱客的博主 轻松枕头,这篇文章主要介绍结合axios对项目中的api请求进行封装操作,现在分享给大家,希望可以做个参考。

痛点:

1. 后端对全部请求的url进行了调整。

2.后端要求给所有的请求头部添加一个token, 或者对请求添加其他全局处理。

3.请求代码直接写在每个页面里, 看起来代码臃肿,不够简练,太难管理。

4.看到请求代码, 不明白该请求是干嘛的,语义化不够明显。 ...

上面列举的是一些常见的问题,如果没对api进行封装,当请求比较多的时候,修改起来欲哭无泪,解决这些问题可以进行以下操作

1.对axios进行二次封装

2.对全部api请求也进行封装

如下是对axios 进行二次封装, 文件名是 network/index.js:

复制代码
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
import axios from "axios"; import Cookies from "js-cookie"; // 设置超时时间 const myAxios = axios.create({ timeout: 5000 }); // 跳转登录页面 function nav2Login() { location.href = '/xxxx/login' } // 添加一个请求拦截器 myAxios.interceptors.request.use( function(config) { // Do something before request is sent config.headers["token"] = Cookies.get("token") || ""; return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // 添加一个响应拦截器 myAxios.interceptors.response.use( function(response) { // Do something with response data // 这里只是以200 401为示例, 其他状态码可以根据需要自行添加 if (response.status === 200) { return response.data; } else if (response.status === 401) { nav2Login() return Promise.reject(); } else { return { status: 0, message: response.data.message }; } }, function(error) { // Do something with response error return Promise.reject(error); } ); export default myAxios;

下面是对全部的api进行了封装,文件名是 network/api.js:

复制代码
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
import axios from "./index.js"; const API = { userList: 'api/user/all', // 用户列表 cityList: 'api/city/all', // 城市列表 }; function Axios(obj) { return axios({ ...obj }).catch(e => { // 这里兜住error, 从而不影响后续代码执行,避免出现白屏 return { status: 0, message: "网络请求异常" }; }); } // 给函数命名的时候 尽量语义化 function getUserList(params) { return Axios({ url: API.userList, method: "post", params }); } function getCityList(params) { return Axios({ url: API.cityList, method: "get", params }); } export default { getUserList, getCityList, }

可以把这些请求挂载在一个全局的变量上, 以Vue为例:

复制代码
1
2
3
4
5
6
7
8
9
10
import Vue from 'vue' import App from './App.vue' import router from './router' import api from "@/network/api.js"; Vue.prototype.$api = api; new Vue({ router, render: h => h(App) }).$mount('#app')

Vue项目中使用方法如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.$api.getUserList(obj).then(res => { // 处理res }).catch(err){ // 处理 err } // 或者使用async await async getUserList () { try { const res = await this.$api.getUserList(obj) // 处理res } catch (err) { // 处理err } }

补充知识:Vue项目中对axios进行封装以及api接口请求

对axios进行封装:

复制代码
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
/* 定义一个ajax请求函数,并且其返回值: promise对象(异步返回的数据是: response.data) */ import axios from 'axios'; export default function ajax (url, data={}, type='GET') { return new Promise(function (resolve, reject) { // 执行异步ajax请求 let promise if (type === 'GET') { // 准备url query参数数据, let dataStr = '' //数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 发送get请求 promise = axios.get(url) } else { // 发送post请求 promise = axios.post(url, data) } promise.then(function (response) { // 成功了调用resolve() resolve(response.data) }).catch(function (error) { //失败了调用reject() reject(error) }) }) }

以上这篇结合axios对项目中的api请求进行封装操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持靠谱客。

最后

以上就是轻松枕头最近收集整理的关于结合axios对项目中的api请求进行封装操作的全部内容,更多相关结合axios对项目中内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(169)

评论列表共有 0 条评论

立即
投稿
返回
顶部