axios配置参数:

  1. axios({
  2. url: 'http://127.0.0.1:3000/users', // 请求的路径
  3. method: 'get', // 请求方式
  4. headers: { // 配置请求头
  5. /* 在配置请求头,一些特殊字段 */
  6. },
  7. data: { // 设置请求的参数
  8. name: 'aabb',
  9. age: '18'
  10. }
  11. }).then((res) => {
  12. console.log(res)
  13. })

axios二次封装示例:

  1. import axios from 'axios'
  2. import config from './config.js'
  3. import qs from 'qs'
  4. export default function $axios (options) {
  5. return new Promise((resolve, reject) => {
  6. const instance = axios.create({
  7. baseURL: config.baseURL,
  8. headers: {},
  9. transformResponse: [function (data) {}]
  10. }
  11. )
  12. // request 拦截器
  13. instance.interceptors.request.use(
  14. config => {
  15. if (config.method.toLocaleLowerCase() === 'post'
  16. || config.method.toLocaleLowerCase() === 'put'
  17. || config.method.toLocaleLowerCase() === 'delete') {
  18. config.data = qs.stringify(config.data)
  19. }
  20. return config
  21. },
  22. error => {
  23. if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
  24. //这里可能会存在超时
  25. // return service.request(originalRequest);
  26. }
  27. const errorInfo = error.response
  28. console.log(errorInfo)
  29. if (errorInfo) {
  30. const errorStatus = errorInfo.status; // 404 403 500 ... 等
  31. router.push({
  32. path: `/error/${errorStatus}`
  33. })
  34. }
  35. return Promise.reject(error)
  36. }
  37. )
  38. // response 拦截器
  39. instance.interceptors.response.use(
  40. response => {
  41. let data;
  42. // IE9时response.data是undefined,因此需要使用response.request.responseText(Stringify后的字符串)
  43. if(response.data == undefined){
  44. data = response.request.responseText
  45. } else{
  46. data = response.data
  47. }
  48. // 根据返回的code值来做不同的处理(和后端约定)
  49. switch (data.code) {
  50. case '':
  51. break;
  52. default:
  53. }
  54. // 若不是正确的返回code,且已经登录,就抛出错误
  55. // const err = new Error(data.description)
  56. // err.data = data
  57. // err.response = response
  58. // throw err
  59. return data
  60. },
  61. err => {
  62. if (err && err.response) {
  63. switch (err.response.status) {
  64. case 400:
  65. err.message = '请求错误'
  66. break
  67. case 401:
  68. err.message = '未授权,请登录'
  69. break
  70. case 403:
  71. err.message = '拒绝访问'
  72. break
  73. case 404:
  74. err.message = `请求地址出错: ${err.response.config.url}`
  75. break
  76. case 408:
  77. err.message = '请求超时'
  78. break
  79. case 500:
  80. err.message = '服务器内部错误'
  81. break
  82. case 501:
  83. err.message = '服务未实现'
  84. break
  85. case 502:
  86. err.message = '网关错误'
  87. break
  88. case 503:
  89. err.message = '服务不可用'
  90. break
  91. case 504:
  92. err.message = '网关超时'
  93. break
  94. case 505:
  95. err.message = 'HTTP版本不受支持'
  96. break
  97. default:
  98. }
  99. }
  100. return Promise.reject(err)
  101. }
  102. )
  103. instance(options)
  104. .then((res) => {
  105. resolve(res)
  106. return false
  107. })
  108. .catch((error) => {
  109. reject(error)
  110. })
  111. })
  112. }