本文代码参考了网上别人的资料,经过修改而来

 /**
* Created by zxf on 2017/9/6.
* 封装统一的ajax请求,统一拦截请求,对不同的请求状态封装
* 通常说, ajax 请求错误有两种, 一种是网络问题或者代码问题所造成的 400, 500错误等,需要checkStatus方法拦截
* 另外一种是请求参数后端通不过验证, 由后端抛出的错误,需要checkCode拦截处理
*第二种根据不同的后端框架或者程序猿又可以分成两种, 一种是直接返回 json, 用一个 特别的 code 来区别正常请求返回的数据, 如:
*/
import qs from 'qs'
import axios from 'axios' /**
* axios请求拦截器
* @param {object} config axios请求配置对象
* @return {object} 请求成功或失败时返回的配置对象或者promise error对象
**/
axios.interceptors.request.use(config => {
return config
}, error => {
return Promise.reject(error)
}) /**
* axios 响应拦截器
* @param {object} response 从服务端响应的数据对象或者error对象
* @return {object} 响应成功或失败时返回的响应对象或者promise error对象
**/
axios.interceptors.response.use(response => {
return response
}, error => {
return Promise.resolve(error)
}) /**
* 请求发出后检查返回的状态码,统一捕获正确和错误的状态码,正确就直接返回response,错误就自定义一个返回对象
* @param {object} response 响应对象
* @return {object} 响应正常就返回响应数据否则返回错误信息
**/
function checkStatus (response) {
// 如果状态码正常就直接返回数据,这里的状态码是htttp响应状态码有400,500等,不是后端自定义的状态码
if (response && ((response.status === 200 || response.status === 304 || response.status === 400))) {
return response.data // 直接返回http response响应的data,此data会后端返回的数据数据对象,包含后端自定义的code,message,data属性
}
return { // 自定义网络异常对象
code: '404',
message: '网络异常'
}
} /**
* 检查完状态码后需要检查后如果成功了就需要检查后端的状态码处理网络正常时后台语言返回的响应
* @param {object} res 是后台返回的对象或者自定义的网络异常对象,不是http 响应对象
* @return {object} 返回后台传过来的数据对象,包含code,message,data等属性,
**/
// function checkCode (res) {
// // 如果状态码正常就直接返回数据
// console.log(res)
// if (res.code === -404) { // 这里包括网络异常,服务器异常等这种异常跟业务无关,直接弹窗警告
// alert(res.message)
// return {code: '', message: '网络错误'}
// } else { // 除了上面的异常就剩下后端自己返回的状态code了这个直接返回出去供调用时根据不同的code做不同的处理
// return res
// }
// } export default {
post (url, data) {
return axios({
method: 'post',
baseURL: process.env.BASE_URL,
url: url,
data: qs.stringify(data),
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
timeout: 10000
}).then((res) => {
return checkStatus(res)
})
},
get (url, params) {
return axios({
method: 'get',
baseURL: process.env.BASE_URL,
url,
params,
timeout: 10000,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(
(response) => {
return checkStatus(response)
}
)
} }

最新文章

  1. Python 爬虫模拟登陆知乎
  2. android windows
  3. iis到w3wp的数据流及工作原理
  4. Ninth scrum meeting - 2015/11/3
  5. sigar监控
  6. hdoj 2044一只小蜜蜂...【斐波那契变形】
  7. winform 跨窗体给控件传值 分类: WinForm 2014-08-02 16:33 195人阅读 评论(0) 收藏
  8. (二)backbone - DEMO - user list
  9. Node.js:常用工具util
  10. vue.js路由参数简单实例讲解------简单易懂
  11. Android艺术开发探索第四章——View的工作原理(下)
  12. UIScrollView实现图片轮播器的无限滚动
  13. 002.Ceph安装部署
  14. git将本地项目推送到远程仓库
  15. Dependency Injection2
  16. 第九章 词典 (c)散列:散列函数
  17. China Internet Conference(2018.07.12)
  18. LA 4254 处理器(二分+贪心)
  19. 使用Shell脚本删除/清空日志文件
  20. 【教程】HTML5+JavaScript编写flappy bird

热门文章

  1. Python列出文件夹中的文件
  2. 实现迭代器(\_\_next\_\_和\_\_iter\_\_)
  3. Ubuntu下查看硬盘分区UUID的方法&所有Linux目录樹
  4. 2019年icpc上海网络赛 B Light bulbs (分块、差分)
  5. 图之强连通--Tarjan算法
  6. windows Apache 配置支持HTTPS的SSL证书
  7. mysql统计指定数据库的各表的条数
  8. 如何让网站HTTPS评级为A或者A+
  9. ubuntu14 中文显示问号
  10. 深度优先搜索(DFS)和广度优先搜索(BFS)求解迷宫问题