axios封装

封装：

http.js

1. import axios from 'axios'

2. axios.defaults.baseURL="http://127.0.0.1:8000/"

3. axios.defaults.timeout = 1000000;

4. axios.defaults.headers.post['Content-Type'] = 'application/json';

5. axios.defaults.headers.put['Content-Type'] = 'application/json';

6.  
7.  
8.  

9. axios.interceptors.request.use(

10. config => {

11. // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了

12. const token = sessionStorage.getItem("jwt_token")

13. console.log(token)

14. if (token){

15. config.headers.Authorization = 'JWT '+ token

16. }

17. return config;

18. },

19. error => {

20. return Promise.error(error);

21. })

22.  
23.  
24.  
25.  

26. axios.interceptors.response.use(

27. // 请求成功

28. res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),

29.  

30. // 请求失败

31. error => {

32. if (error.response) {

33. // 判断一下返回结果的status == 401？ ==401跳转登录页面。 ！=401passs

34. console.log(error.response)

35. if(error.response.status===401){

36. // 跳转不可以使用this.$router.push方法、

37. // this.$router.push({path:'/login'})

38. window.location.href="http://127.0.0.1:8080/#/login"

39. }else{

40. // errorHandle(response.status, response.data.message);

41. return Promise.reject(error.response);

42. }

43. // 请求已发出，但是不在2xx的范围

44. } else {

45. // 处理断网的情况

46. // eg:请求超时或断网时，更新state的network状态

47. // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏

48. // 关于断网组件中的刷新重新获取数据，会在断网组件中说明

49. // store.commit('changeNetwork', false);

50. return Promise.reject(error.response);

51. }

52. });

53.  
54.  

55. // 封装xiaos请求 封装axios里的get

56. export function axios_get(url,params){

57. return new Promise(

58. (resolve,reject)=>{

59. axios.get(url,{params:params})

60. .then(res=>{

61. console.log("封装信息的的res",res)

62. resolve(res.data)

63. }).catch(err=>{

64. reject(err.data)

65. })

66. }

67. )

68. }

69.  
70.  

71. export function axios_post(url,data){

72. return new Promise(

73. (resolve,reject)=>{

74. console.log(data)

75. axios.post(url,JSON.stringify(data))

76. .then(res=>{

77. console.log("封装信息的的res",res)

78. resolve(res.data)

79. }).catch(err=>{

80. reject(err.data)

81. })

82. }

83. )

84. }

85.  

86. export function axios_put(url,data){

87. return new Promise(

88. (resolve,reject)=>{

89. console.log(data)

90. axios.put(url,JSON.stringify(data))

91. .then(res=>{

92. console.log("封装信息的的res",res)

93. resolve(res.data)

94. }).catch(err=>{

95. reject(err.data)

96. })

97. }

98. )

99. }

100.  

101. export function axios_delete(url,data){

102. return new Promise(

103. (resolve,reject)=>{

104. console.log(data)

105. axios.delete(url,{params:data})

106. .then(res=>{

107. console.log("封装信息的的res",res)

108. resolve(res.data)

109. }).catch(err=>{

110. reject(err.data)

111. })

112. }

113. )

114. }

导出使用：

api.js

1. import {axios_get,axios_post,axios_delete,axios_put} from './http.js'

2.  

3. export const jwt_send_get = p => axios_get("/appjwt/index01/",p)