一、axios的PCB
、中止允诺、切换json、应用程序防卫XSRF等。因此他们的尤大幅也是主动出击舍弃了对其非官方库vue-resource的保护，间接所推荐他们采用axios库。假如还对axios不介绍的，能点选axios文件格式。
加装
npm install axios; // 加装axios拷贝标识符导入
通常就要在工程项目的src产品目录中，增建两个request文件格式夹，接着在里头增建两个http.js和两个api.js文件格式。http.js文件格式用以PCB他们的axios，api.js用以标准化管理工作他们的USB。
// 在http.js中导入axios import axios from axios; // 导入axios import QS from qs; // 导入qs组件，用以格式化post类别的统计数据，前面会提及 // vant的toast提示符组件，我们可依照他们的ui组件更动。 import { Toast } from vant; 拷贝标识符自然环境的切换
他们的工程项目自然环境可能将有合作开发自然环境、测试自然环境和制造自然环境。他们透过node的自然配置文件来相匹配他们的预设的USBurl后缀。axios.defaults.baseURL能增设axios的预设允诺门牌号就不多说了。
// 自然环境的切换 if (process.env.NODE_ENV == development) { axios.defaults.baseURL = https://www.baidu.com;} else if (process.env.NODE_ENV == debug) { axios.defaults.baseURL = https://www.ceshi.com; } else if (process.env.NODE_ENV == production) { axios.defaults.baseURL = https://www.production.com; }拷贝标识符增设允诺超时
透过axios.defaults.timeout增设预设的允诺超时时间。例如超过了10s，就会告知用户当前允诺超时，请刷新等。
axios.defaults.timeout = 10000;拷贝标识符post允诺头的增设
post允诺的时候，他们需要加上两个允诺头，因此能在这里进行两个预设的增设，即增设post的允诺头为
application/x-www-form-urlencoded;charset=UTF-8axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded;charset=UTF-8;拷贝标识符 允诺拦截他们在发送允诺前能进行两个允诺的拦截，为什么要拦截呢，他们拦截允诺是用以做什么的呢？比如，有些允诺是需要用户登录之后才能访问的，或者post允诺的时候，他们需要格式化他们提交的统计数据。这时候，他们能在允诺被发送之前进行两个拦截，从而进行他们想要的操作。
允诺拦截
// 先导入vuex,因为他们要采用到里头的状态对象 // vuex的路径依照他们的路径去写 import store from @/store/index; // 允诺拦截器axios.interceptors.request.use( config => { // 每次发送允诺之前判断vuex中是否存在token // 假如存在，则标准化在http允诺的header都加上token，这样后台依照token判断你的登录情况 // 即使本地存在token，也有可能将token是过期的，因此在响应拦截器中要对返回状态进行判断 const token = store.state.token; token && (config.headers.Authorization = token); return config; }, error => { return Promise.error(error); }) 拷贝标识符这里说一下token，通常是在登录完成之后，将用户的token透过localStorage或者cookie存在本地，接着用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。接着，在每次允诺USB的时候，都会在允诺的header中携带token，后台人员就能依照你携带的token来判断你的登录是否过期，假如没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个允诺都携带token，那么要是两个页面不需要用户登录就能访问的怎么办呢？其实，你前端的允诺能携带token，但是后台能选择不接收啊！
响应的拦截
// 响应拦截器 axios.interceptors.response.use( response => { // 假如返回的状态码为200，说明USB允诺成功，能正常拿到统计数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服务器状态码不是2开头的的情况 // 这里能跟你们的后台合作开发人员协商好标准化的错误状态码 // 接着依照返回的状态码进行一些操作，例如登录过期提示，错误提示等等 // 下面列举几个常见的操作，其他需求可自行扩展 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面，并携带当前页面的路径 // 在登录成功后返回当前页面，这一步需要在登录页操作。 case 401: router.replace({ path: /login, query: { redirect: router.currentRoute.fullPath } }); break; // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: Toast({ message: 登录过期，请重新登录, duration: 1000, forbidClick: true }); // 清除token localStorage.removeItem(token); store.commit(loginSuccess, null); // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: /login, query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; // 404允诺不存在 case 404: Toast({ message: 网络允诺不存在, duration: 1500, forbidClick: true }); break; // 其他错误，间接抛出错误提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } });拷贝标识符响应拦截器很好理解，就是服务器返回给他们的统计数据，他们在拿到之前能对他进行一些处理。例如上面的思想：假如后台返回的状态码是200，则正常返回统计数据，否则的依照错误的状态码类别进行一些他们需要的错误，其实这里主要就是进行了错误的标准化处理和没登录或登录过期后调整登录页的两个操作。
要注意的是，上面的Toast()方法，是我导入的vant库中的toast轻提示组件，你依照你的ui库，对应采用你的两个提示组件。
PCBget方法和post方法
他们常用的ajax允诺方法有get、post、put等方法，相信小伙伴都不会陌生。axios对应的也有很多类似的方法，不清楚的能看下文件格式。但是为了简化他们的标识符，他们还是要对其进行两个简单的PCB。下面他们主要PCB两个方法：get和post。
get方法：他们透过定义两个get函数，get函数有两个参数，第两个参数表示他们要允诺的url门牌号，第二个参数是他们要携带的允诺参数。get函数返回两个promise对象，当axios其允诺成功时resolve服务器返回 值，允诺失败时reject错误值。最后透过export抛出get函数。
/** * get方法，对应get允诺 * @param {String} url [允诺的url门牌号] * @param {Object} params [允诺时携带的参数] */ export function get(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params }).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) });}拷贝标识符post方法：原理同get基本一样，但是要注意的是，post方法必须要采用对提交从参数对象进行格式化的操作，因此这里他们透过node的qs组件来格式化他们的参数。这个很重要，假如没有格式化操作，后台是拿不到你提交的统计数据的。这就是文章开头他们import QS from qs;的原因。假如不明白格式化是什么意思的，就百度一下吧，答案一大堆。
/** * post方法，对应post允诺 * @param {String} url [允诺的url门牌号] * @param {Object} params [允诺时携带的参数] */ export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, QS.stringify(params)) .then(res => { resolve(res.data); }) .catch(err =>{ reject(err.data) }) }); }拷贝标识符这里有个小细节说下，axios.get()方法和axios.post()在提交统计数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是两个{}，接着这个对象的params属性值是两个参数对象的。而post的第二个参数就是两个参数对象。两者略微的区别要留意哦！
axios的PCB基本就完成了，下面再简单说下api的统一管理工作。
整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。上面说了，他们会增建两个api.js,接着在这个文件格式中存放他们所有的apiUSB。
首先他们在api.js中导入他们PCB的get和post方法/** * apiUSB标准化管理工作 */ import { get, post } from ./http拷贝标识符现在，例如他们有这样两个USB，是两个post允诺：
http://www.baiodu.com/api/v1/users/my_address/address_edit_before拷贝标识符他们能在api.js中这样PCB：
export const apiAddress = p => post(api/v1/users/my_address/address_edit_before, p);拷贝标识符他们定义了两个apiAddress方法，这个方法有两个参数p，p是他们允诺USB时携带的参数对象。而后调用了他们PCB的post方法，post方法的第两个参数是他们的USB门牌号，第二个参数是apiAddress的p参数，即允诺USB时携带的参数对象。最后透过export导出apiAddress。
接着在他们的页面中能这样调用他们的apiUSB：
import { apiAddress } from @/request/api;// 导入他们的apiUSB export default { name: Address, created () { this.onLoad(); ……………… }) } } }拷贝标识符其他的apiUSB，就在pai.js中继续往下面扩展就能了。友情提示，为每个USB写好注释哦！！！
apiUSB管理工作的两个好处就是，他们把api标准化集中起来，假如后期需要修改USB，他们就间接在api.js中找到对应的修改就好了，而不用去每两个页面查找他们的USB接着再修改会很麻烦。关键是，万一修改的量比较大，就规格gg了。还有就是假如间接在他们的业务标识符修改USB，一不小心还容易动到他们的业务标识符造成不必要的麻烦。
好了，最后把完成的axiosPCB标识符奉上。
/**axiosPCB * 允诺拦截、相应拦截、错误标准化处理 */ import axios from axios;import QS from qs; import { Toast } from vant; import store from ../store/index // 自然环境的切换 if (process.env.NODE_ENV == development) { axios.defaults.baseURL = /api; } else if (process.env.NODE_ENV == debug) { axios.defaults.baseURL = ; } else if (process.env.NODE_ENV == production) { axios.defaults.baseURL = http://api.123dailu.com/; } // 允诺超时时间 axios.defaults.timeout = 10000; // post允诺头 axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded;charset=UTF-8; // 允诺拦截器 axios.interceptors.request.use( config => { // 每次发送允诺之前判断是否存在token，假如存在，则标准化在http允诺的header都加上token，不用每次允诺都手动添加了 // 即使本地存在token，也有可能将token是过期的，因此在响应拦截器中要对返回状态进行判断 const token = store.state.token; token && (config.headers.Authorization = token); return config; }, error => { return Promise.error(error); }) // 响应拦截器 axios.interceptors.response.use( response => { if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服务器状态码不是200的情况 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面，并携带当前页面的路径 // 在登录成功后返回当前页面，这一步需要在登录页操作。 case 401: router.replace({ path: /login, query: { redirect: router.currentRoute.fullPath } }); break; // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: Toast({ message: 登录过期，请重新登录, duration: 1000, forbidClick: true }); // 清除token localStorage.removeItem(token); store.commit(loginSuccess, null); // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 setTimeout(() => { router.replace({ path: /login, query: { redirect: router.currentRoute.fullPath } }); }, 1000); break; // 404允诺不存在 case 404: Toast({ message: 网络允诺不存在, duration: 1500, forbidClick: true }); break; // 其他错误，间接抛出错误提示 default: Toast({ message: error.response.data.message, duration: 1500, forbidClick: true }); } return Promise.reject(error.response); } } ); /** * get方法，对应get允诺 * @param {String} url [允诺的url门牌号] * @param {Object} params [允诺时携带的参数] */ export function get(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params }) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) }); } /** * post方法，对应post允诺 * @param {String} url [允诺的url门牌号] * @param {Object} params [允诺时携带的参数] */ export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, QS.stringify(params)) .then(res => { resolve(res.data); }) .catch(err => { reject(err.data) }) }); } 拷贝标识符作者：愣锤
链接：
https://juejin.im/post/5b55c118f265da0f6f1aa354著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
