痛点：
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请求进行封装操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。
原文链接：https://www.cnblogs.com/yalong/p/13531223.html
