美文网首页vue程序员
VUE:封装axios(基础版),包含了请求超时等等

VUE:封装axios(基础版),包含了请求超时等等

作者: 方丈先生 | 来源:发表于2018-03-02 11:27 被阅读0次
    用的简书的markdown功能,不然贴出来的代码会变成一大坨。
    初用axios,我感觉要做下封装,大家都能用起来。
    这是我结合好多资料封装的,包含了请求前的处理,请求异样的处理(例如:超时,504等等),代码里边的注释挺详细的,
    大家可以做下参考,也希望大家多多提出意见
    
    // 封装axios请求,官网:https://www.npmjs.com/package/axios,axios还可以同时处理多个接口请求,这里先不做介绍
    // params是添加到url的请求字符串中的,用于get请求,例如shinyway.com?key=params
    // 而data是添加到请求体(body)中的, 用于post请求,传递参数
    import axios from 'axios'
    import store from '@/store/index'
    import qs from 'qs' // node.js的产物,序列化请求数据,视服务端的要求需不需要,暂且先用
    import router from '@/router' // 用于在判断错误时的重定向页面,例如404页面等
    import { getToken } from '@/utils/auth'
    
    // 创建axios实例 axiso的一些基础参数配置,
    const service = axios.create({
      baseURL: process.env.BASE_API, // 配置在config/prod.env里的baseApi
      timeout: 5000 // 超时时间
    })
    // 传参拦截器
    service.interceptors.request.use(
      config => {
        //  打开loadding
        store.commit('CONTROL_LOADDING', true)
        if (store.getters.token) {
          config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
        }
        // 判断为post请求,序列化传来的参数
        if (config.method === 'post' || config.method === 'put' || config.method === 'delete') {
          config.data = qs.stringify(config.data)
        }
        return config
      }, error => {
        // 处理错误信息
        // alert(error.data.error.message)
        return Promise.reject(error)
      })
    
    // 响应拦截器
    service.interceptors.response.use(res => {
      // 请求成功时要做的处理
    
      // 对响应数据做些事,把loading动画关掉
      store.commit('CONTROL_LOADDING', false)
      // 对请求成功的值进行统一判断
      //   1.判空
      if (res.data === '' || res.data.length === 0 || res.data === 'undefined' || res.data === undefined) {
        console.log('后台传来的data为空/为undefined')
      }
      //   2.错误提示(前提是接口跑通了,只是对里边某些值做下详细判断。要先跟后台商定好,对某个固定的字段进行判断,并且确定固定字段来承接 错误信息,方便展示)
      // if (res.data && !res.data.success) {
      //  console.log(res.data.error.message)
      // }
      return res.data
    }, error => {
      // 请求错误时做些事(接口错误、超时等)
    
      // 关闭loadding
      store.commit('CONTROL_LOADDING', false)
      console.log(error) // 打开控制台,可以看到error包含了几个对象:message, config, code, request, response,可以拿来请求超时等问题
    
      //  1.判断请求超时
      if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
        console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了,你可以在这里加入超时的处理方案')
        // return service.request(originalRequest);//例如再重复请求一次
      }
      //  2.需要重定向到错误页面
      const errorInfo = error.response
      console.log(errorInfo)
      if (errorInfo) {
        // error =errorInfo.data//页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
        if (errorInfo.status === 403) {
          router.push({
            path: '/error/403'
          })
        }
        // if (errorInfo.status === 500) {
        //   router.push({
        //     path: "/error/500"
        //   });
        // }
        // if (errorInfo.status === 502) {
        //   router.push({
        //     path: "/error/502"
        //   });
        // }
        // if (errorInfo.status === 404) {
        //   router.push({
        //     path: "/error/404"
        //   });
        // }
      }
      return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
    })
    export default service
    
    

    相关文章

      网友评论

        本文标题:VUE:封装axios(基础版),包含了请求超时等等

        本文链接:https://www.haomeiwen.com/subject/gbtaxftx.html