项目搭建--请求模块封装

142 阅读1分钟

axios拦截器

axios作为网络请求的第三方工具, 可以进行请求和响应的拦截

通过create创建了一个新的axios实例

   // 创建了一个新的axios实例
   const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // 超时时间
  })
  

请求拦截器

主要处理 token的**统一注入问题**

      service.interceptors.request.use(
        config => {
      // do something before request is sent
        if (store.getters.token) {
         config.headers['X-Token'] = getToken()
        }
        return config
       },
         error => {
      // do something with request error
       console.log(error) // for debug
       return Promise.reject(error)
      }
     )

响应拦截器

响应拦截器主要处理 返回的**数据异常** 和**数据结构**问题

 service.interceptors.response.use(
 response => {
 //封装data
 //判断数据是否接收成功
 },
  error => {
    return Promise.reject(error)
  }
  )