前言：
在一开始前后台交互过程中，我们一般都是使用传统的ajax进行交互，传统ajax 指的是XMLHttpRequest（XHR），隶属原生js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱，往往需要封装多层回调方法进行数据关系逻辑处理。
随着时间的发展，前端流行起来了angular/vue/react 等等各种前端新的框架逻辑，使用mvc/mvvm等模式进行编程开发，然而这个时候我们的ajax并不能满足前端mvvm的浪潮，个性打包也不能享用cdn的加速处理，这个时候在vue2中，我们的大神尤大大提出使用axios进行交互处理。废话少说，这里介绍一下，我对axios的封装处理过程。
1.首先为了区分环境处理，我们libs下新建 config.js 和ajax.js 两个文件。config中处理我们基础的环境配置处理。这些内容较为简单，可以根据个人需求进行修改：
2.ajax中的处理：
import configURL from './config';
import router from '../route/index'
const getAjaxUrl =(url)=> {
// if (/^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i.test(url)) {
// return configURL.baseURL + URL
// }
return configURL.baseURL + url+configURL.urlParams
}
axios.defaults.baseURL = ''
axios.defaults.timeout=10000
// 请求拦截
axios.interceptors.request.use(
reqConfig => {
// 每次发送请求之前判断 localStorage 中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
// const token = localStorage.getItem('token')
// const token = 'dbrkon78l4mja4eq2vs8hhl8staio4nj' // 测试使用
// const token = '' // 测试使用
// token && (reqConfig.headers['X-WX-Token'] = token)
// reqConfig.params && (reqConfig.params.qrId = 46);
return reqConfig;
},
reqError => {
return Promise.reject(reqError)
}
)
// 响应拦截 每个公司code返回数据格式请求都不相同，根据个人需求自行调整
axios.interceptors.response.use(
resData => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (resData.status === 200) {
const resultNum = resData.data.code;
switch (resultNum) {
case 0:
return Promise.resolve(resData.data);
case 500:
return Promise.resolve(resData.data);
}
} else {
return Promise.reject(resData.data);
}
},
resError => {
return Promise.reject(resError);
}
)
/**
* GET 请求
* @param { String } url 请求地址
* @param { Object } params 参数对象
* @param { Object } config 配置对象
* @param { Function } errCallback 回调函数
*/
export const $get = (url = '', params = {}, config = {}, errCallback = null) => {
// const _config = Object.assign({
// headers: {
// 'qrCode': sessionStorage.getItem('code') || ''
// }
// }, config);
// if(sessionStorage.getItem('code')){
// params = _config.headers
// }
return axios.get(getAjaxUrl(url), {params}, config).then(res => {
return res;
}).catch(err => {
errCallback && errCallback();
return err;
})
}
/**
* POST 请求
* @param { String } url 请求地址
* @param { Object } params 参数对象
* @param { Object } config 配置对象
* @param { Function } errCallback 回调函数
*/
export const $post = (url = '', params = {}, config = {}, errCallback = null) => {
const _config = Object.assign({
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}, config);
let resultParams;
if (_config.headers['Content-Type'].toLowerCase().indexOf('json') > -1) {
resultParams = params;
} else {
resultParams = params;
}
return axios.post(getAjaxUrl(url)+'?qrCode='+sessionStorage.getItem('code'), resultParams, _config).then(res => {
console.log(res)
return res;
}).catch(err => {
errCallback && errCallback();
return err;
})
}
之后 我们在api的文件中进行调用使用
import { $get ,$post} from '@/libs/ajax.js';
例微信接口处理 get请求
const getWxConfig = (data = {}) => {
return $get(
'/apiStk/wx/weixin',
Object.assign({}, data)
)
}
const saveStkQrDetail = (data = {}) => {
return $post(
'/apiStk/make/saveStkQrDetail',
Object.assign({},data),
{
headers: {
'Content-Type': 'application/json'
}
}
)
}
export {
getWxConfig,
}