vue 封装请求

亦凉 2023-02-12 15:26 136阅读 0赞

创建文件夹

在这里插入图片描述

http.js

  1. import axios from 'axios';
  2. // 设置请求超时时间和域名  创建axios实例
  3. const instance = axios.create({ 
  4.   baseURL: '127.0.0.1',
  5.   timeout: 5000
  6. })
  8. //  http request 拦截器
  9. instance.interceptors.request.use(
  10.   config => { 
  11.     // console.log(config)
  12.     // config.data = JSON.stringify(config.data)
  13.     config.headers = { 
  14.       // 'Content-Type': 'application/x-www-form-urlencoded'
  15.       'Content-Type': 'application/json'
  16.     }
  17.     return config
  18.   }, err => { 
  19.     return Promise.reject(err)
  20.   }
  21. )
  23. //  响应拦截器即异常处理
  24. instance.interceptors.response.use(response => { 
  25.   return response
  26. }, err => { 
  27.   if (err && err.response) { 
  28.     switch (err.response.status) { 
  29.       case 400:
  30.         console.log('错误请求')
  31.         break
  32.       case 401:
  33.         console.log('未授权，请重新登录')
  34.         break
  35.       case 403:
  36.         console.log('拒绝访问')
  37.         break
  38.       case 404:
  39.         console.log('请求错误,未找到该资源')
  40.         break
  41.       case 405:
  42.         console.log('请求方法未允许')
  43.         break
  44.       case 408:
  45.         console.log('请求超时')
  46.         break
  47.       case 500:
  48.         console.log('服务器端出错')
  49.         break
  50.       case 501:
  51.         console.log('网络未实现')
  52.         break
  53.       case 502:
  54.         console.log('网络错误')
  55.         break
  56.       case 503:
  57.         console.log('服务不可用')
  58.         break
  59.       case 504:
  60.         console.log('网络超时')
  61.         break
  62.       case 505:
  63.         console.log('http版本不支持该请求')
  64.         break
  65.       default:
  66.         console.log(`连接错误${ err.response.status}`)
  67.     }
  68.   } else { 
  69.     console.log('连接到服务器失败')
  70.   }
  71.   return Promise.resolve(err.response)
  72. })
  74. /**
  76. * 封装get方法
  78. * @param url
  80. * @param data
  82. * @returns { Promise}
  84. */
  86. function get(url, params = { }) { 
  87.   return new Promise((resolve, reject) => { 
  88.     instance.get(url, { 
  89.       params: params
  90.     })
  91.       .then(response => { 
  92.         resolve(response.data)
  93.       })
  94.       .catch(err => { 
  95.         reject(err)
  96.       })
  97.   })
  99. }
  101. /**
  103. * 封装post请求
  105. * @param url
  107. * @param data
  109. * @returns { Promise}
  111. */
  113. function post(url, data = { }) { 
  114.   return new Promise((resolve, reject) => { 
  115.     instance.post(url, data)
  116.       .then(response => { 
  117.         resolve(response.data)
  118.       }, err => { 
  119.         reject(err)
  120.       })
  121.   })
  122. }
  124. /**
  126. * 封装patch请求
  128. * @param url
  130. * @param data
  132. * @returns { Promise}
  134. */
  136. function patch(url, data = { }) { 
  137.   return new Promise((resolve, reject) => { 
  138.     instance.patch(url, data)
  139.       .then(response => { 
  140.         resolve(response.data)
  141.       }, err => { 
  142.         reject(err)
  143.       })
  144.   })
  146. }
  148. /**
  150. * 封装put请求
  152. * @param url
  154. * @param data
  156. * @returns { Promise}
  158. */
  160. function put(url, data = { }) { 
  161.   return new Promise((resolve, reject) => { 
  162.     instance.put(url, data)
  163.       .then(response => { 
  164.         resolve(response.data)
  165.       }, err => { 
  166.         reject(err)
  167.       })
  168.   })
  169. }
  170. /**
  172. * 封装delete请求
  174. * @param url
  176. * @param data
  178. * @returns { Promise}
  180. */
  181.  function del(url,params){ 
  182.   return new Promise((resolve,reject)=>{ 
  183.     instance.delete(url,params).then(response=>{   //这里传递的参数不做处理
  184.              resolve(response.data);
  185.        },err=>{ 
  186.              reject(err);
  187.        }).catch((error)=>{ 
  188.              reject(error);
  189.        })
  190.   })
  191. }
  193. //  开放接口
  195. export default { 
  196.   get: get,
  197.   post: post,
  198.   put: put,
  199.   patch: patch,
  200.   del:del
  201. }

api.js

  1. import login from './page/login'
  2. import companies from './page/companies'
  4. export const api = { 
  5. //登录模块
  6.   login,
  7.   //企业列表
  8.   companies,
  9. }

在创建一个文件夹 把api分模块管理

在这里插入图片描述

  1. import http from '../http'
  3. export  default {
  4.     //登录请求
  5.   login(data) {
  6.     return http.post('/api-admin/login', data)
  7.   },
  8. }

main.js

  1. import { api} from './axios/api'
  2. Vue.prototype.$api = api;

.vue

在这里插入图片描述

delete特别注意
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，136人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-封装axios请求

    最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

    超、凢脫俗超、凢脫俗/ 0 赞/ 167 阅读