axios怎样实现请求封装及使用?
发布时间：2022-02-25 13:25:27 所属栏目：语言 来源：互联网
导读：axios怎样实现请求封装及使用?通常，如果我们是做大型的项目，那么就需要使用到很多接口，而为了使用的方便，将接口封装起来很一个不错的方法，因此下面小编就能给大家分享axios的简单封装，需要的朋友可以参考。 前言 最近在构建项目时，想到了请求的封装，
|
axios怎样实现请求封装及使用?通常，如果我们是做大型的项目，那么就需要使用到很多接口，而为了使用的方便，将接口封装起来很一个不错的方法，因此下面小编就能给大家分享axios的简单封装，需要的朋友可以参考。 前言 最近在构建项目时，想到了请求的封装，之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情，但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接口应该放于两个文件，因此我新建了两个文件 axios.js与api.js axios.js axios.js主要是针对axios的一些基本配置： baseURL 请求拦截器 响应拦截器 等等 import axios from 'axios'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import router from '../router'; 首先在当前js中引入axios，引入element是为了在当前js内可以使用其组件，目的是为了在响应拦截器中对各种返回值进行直接提示。引入router的为了在响应拦截器中根据具体返回值来进行页面跳转，比如没有权限则跳转到登录页面 if (process.env.NODE_ENV === 'development') { axios.defaults.baseURL = 'api'; } else if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'https://xxxxxxxxxx/index/'; } 对于baseURL的处理，我区分了开发环境与生产环境 //请求拦截器 区分了一下正常请求时与发送formdata时的请求头 axios.interceptors.request.use((config) => { config.headers['Content-Type'] = 'application/json'; if (config.method === 'post') { //FormData时的请求头 if (Object.prototype.toString.call(config.data) === '[object FormData]') { // 请求拦截器处理 config.headers['Content-Type'] = 'multipart/form-data'; } else if (Object.prototype.toString.call(config.data) === '[object String]') { config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; } } else { config.headers['Content-Type'] = 'application/json'; } return config; }); //响应拦截器 axios.interceptors.response.use( (config) => { let value = config.data; if (config.status && config.status === 200) { if (typeof value === 'string') { if (value === 'timeout') { ElementUI.MessageBox.confirm('太长时间没有操作或操作没有权限，请进入登录页面重新登录?', '提示', { confirmButtonText: '确定', type: 'warning' }).then(() => { router.push({ name: 'login' }); }); }else { ElementUI.Message.info(value); } } } return config; }, (err) => { let value = err.response.statusText; switch (err.response.status) { case 400: ElementUI.Message.error('语法格式有误，服务器无法理解此请求') break; case 401: case 403: case 404: case 405: ElementUI.Message.warning(value); break; default: ElementUI.Message.error('操作过程出错，此次操作无效！' + value); break; } return err.response } ); 对于响应拦截器，我这边是根据自己后端返回的值来处理，因为没怎么弄过后端所以只是对返回简单处理了一下 下面是对get与post的一个封装 export async function axiosGet(url, params = {}) { let res = await axios.get(url, { params: params }); if(res.status === 200){ return res.data }else { throw res.statusText } } export async function axiosPost(url, params = {}) { let res = await axios.post(url, params); if(res.status === 200){ return res.data }else { throw res.statusText } } 使用async与await 直接取到返回值进行判断，如果返回成功则输出返回值 如果不成功则抛出错误 最后将封装的方法导出 api.js 整个api.js是项目内所有接口存放的地方 import { axiosGet,axiosPost } from './axios' 引入axios.js，获取到封装的axiosGet与axiosPost export default { getLogin:(params = {}) => { return axiosPost('/login', params) }, getUser:(params = {}) => { return axiosGet('http://localhost:3000/user', params) } } 这里我使用简单的两个接口来做示例，在api.js中的处理就已经完成了 使用配置好的接口 到这里我们的axios已经封装完毕，接下来就是使用的演示了 import DbauditServer from '@/server/api' //在要调用接口的文件中引入api.js let formData = new FormData formData.append('password', this.formLabelAlign.password) let res1 = await DbauditServer.getLogin(formData) //直接调用就可以正常使用了 let res2 = await DbauditServer.getUser() 当然还可以细致一些，因为之前封装get与post的时候遇到错误返回值是直接抛出，因此，接口的调用也可以使用try catch来包裹，对error进行特定的处理即可。 （编辑：唐山站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
