易扩展,易复用,封装axios

axios介绍:

axios是近几年比较火的一个前端库,完美代替了jquery中的ajax,它不仅可以运行在浏览器也可以运行在nodejs环境下,而且支持Promise API 可以拦截请求,和返回.而且天生防XSRF

为什么需要封装:

有时候我们需要对服务端的状态统一处理,假如服务端返回状态码为300 我们需要重定向到登录页,这时我们就可以封装一下axios的api 使其统一处理我们的300状态码, 简单来说封装是为了让程序更加简洁,易于修改.减少重复性工作.

封装的好处及目的:

可以统一处理错误

可以统一处理状态码

使其调用更加简单

可以更加符合项目需要

封装的准备工作,重点,难点:

需要和后台开发人员约定状态码

需要确定项目的请求过期时间

回话保存机制,session,cookie token

需要哪些请求方式

需要什么格式,json, formdata,或url拼接参数

这里需要注意一下axios的一些api的参数

当method为get时参数是params

当method为post时参数是data

withCredentials 参数为true是支持跨域验证

另外可以取消一个已经发起的xhr请求

另外当封装axios时,我们可能要引入其他的第三方库,比如弹窗插件,vuex,还有router的跳转.

完整代码:

放一个我们项目中用的axios封装


import router from '../router'
import axios from 'axios'import config from './config'// axios默认配置请求的api基础地址
axios.defaults.baseURL = (process.env.NODE_ENV !== 'production' ? config.dev.httpUrl : config.build.httpUrl)
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 30000 // 超时设置30s
export default ((url = '', data = {}) => {return {get (url, data) {return new Promise((resolve, reject) => {axios.get(url, {withCredentials: false,params: data}).then(function (response) {if (response.data.status === 1101) {router.push({path: '/login'})} else if (response.data.status === 200) {resolve(response.data)} else {resolve(response.data)}}).catch(function (error) {reject(error)})})},post (url, data) {return new Promise((resolve, reject) => {axios.post(url, data, {withCredentials: false// headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(function (response) {if (response.data.status === 1101) {router.push({path: '/login'})} else if (response.data.status === 200) {resolve(response.data)} else {resolve(response.data)}}).catch(function (error) {reject(error)})})}}
})()

另一种写法

import axios from "axios";var service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout
});// 添加请求拦截器
service.interceptors.request.use(function(config) {// 在发送请求之前做些什么return config;},function(error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use(function(response) {// 对响应数据做点什么return response;},function(error) {// 对响应错误做点什么return Promise.reject(error);}
);
export default service;

总结:

网上很多库,大多都是可以拿来就可以用的,但高手绝不仅仅满足用,而是要对其进行改造,使其适应自己的项目.从而达到提高开发效率.简单易用的效果.

谢谢阅读.如果觉得对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.