首页 >> js开发 >> js结合axios对项目中的api请求进行封装操作js大全
js结合axios对项目中的api请求进行封装操作js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
痛点：痛点：1. 后端对全部请求的url进行了调整。2.后端要求给所有的请求头部添加一个token， 或者对请求添加其他全局处理。3.请求代码直接写在每个页面里， 看起来代码臃肿，不够简练，太难管理。4.看到请求代码, 不明白该请求是干嘛的，语义化不够明显。 ...上面列举的是一些常见的问题，如果没对api进行封装，当请求比较多的时候，修改起来欲哭无泪，解决这些问题可以进行以下操作1.对axios进行二次封装2.对全部api请求也进行封装如下是对axios 进行二次封装, 文件名是 network/index.js：
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;
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:
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,
}
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为例：
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')
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项目中使用方法如下：
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
}
}
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接口请求补充知识：补充知识：Vue项目中对axios进行封装以及api接口请求对axios进行封装：
/* 定义一个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)
})
})
}
/* 定义一个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请求进行封装操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
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;
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:
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,
}
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为例：
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')
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项目中使用方法如下：
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
}
}
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接口请求补充知识：补充知识：Vue项目中对axios进行封装以及api接口请求对axios进行封装：
/* 定义一个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)
})
})
}
/* 定义一个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请求进行封装操作就是小编分享给大家的全部内容了，希望能给大家一个参考。
相关文章:
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
