axios是现在前端最常用发请求的工具库,本文将对axios进行封装
第一步: 引入axios
cnpm install axios -S第二步: 封装get/post/put等方法
import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } // if(token){ // config.params = {'token':token} // } return config; }, error => { return Promise.reject(err); } ); //http response 拦截器 axios.interceptors.response.use( response => { if(response.data.errCode ==2){ router.push({ path:"/login", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error => { return Promise.reject(error) } ) /** * 封装get方法 * @param url * @param data * @returns {Promise} */ const fetch = (url,params={}) => { return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ const post = (url,data = {}) => { return new Promise((resolve,reject) => { axios.post(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /** * 封装patch请求 * @param url * @param data * @returns {Promise} */ const patch = (url,data = {}) => { return new Promise((resolve,reject) => { axios.patch(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /** * 封装put请求 * @param url * @param data * @returns {Promise} */ const put = (url,data = {}) => { return new Promise((resolve,reject) => { axios.put(url,data) .then(response => { resolve(response.data); },err => { reject(err) }) }) } /* * 将方法统一输出 */ export default { patch, post, put， fetch }第三步: 拦截响应与请求
//拦截所有的请求 axios.interceptors.request.use(config => { console.log(config) // 在需要带上token数据的地方,加上token if(!config.url.endsWith('/login')){ //login接口不用加上token config.headers.Authorization = localStorage.getItem('myToken'); } return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }) // 添加响应拦截器 axios.interceptors.response.use(function (response) { console.log(response) // 对响应数据做点什么 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });可以将拦截的js代码放置到VUE中的main.js里面,这样就可以做到全局拦截了
二、 实际案例:
1. react中使用axios
2. Vue中使用axios
三、对齐微服务架构
为了对齐微服务架构，做到RESTful风格，我做出如下调整：
3.1 目录结构调整
├─api index.js axios底层封装 ├─base 负责调用基础服务,basecenter ├─business 负责调用具体业务服务,businesscenter └─user 负责调用用户相关服务,usercenter这样就可以将所有与api有关的代码，放在一起便于维护
3.2 增加适配层
import api from '../index' import { paramsFilter } from "@/utils/helper"; // 添加角色 export const addRole = params => api.post(`role/add`, paramsFilter(params));其中的paramsFilter方法是作为处理接口数据的方法，这样在.vue文件中调用方法的时候，就可以直接使用处理好的数据，将接口数据的处理放在适配层里面。极大减少了业务逻辑的耦合。
四、进一步抽离业务逻辑
4.1 为什么要抽离
因为每次调用接口都要import这样调用不同文件里的接口就要import多次，那么为什么不利用类的思维来管理接口呢？同时还可以增加命名空间，极大的优化api的管理。
4.2 源码
