1回答

• 

  慕容1249690

  2020-05-05 17:40:21

  import axios from 'axios'

  import service from './contactApi'

  import { Toast } from 'vant'

  
  

  // service 循环遍历输出不同的请求方法

  let instance = axios.create({

      baseURL: 'http://localhost:9000/api',

      timeout: 1000

  })

  
  

  // 包裹请求方法的容器

  const Http = {}

  
  

  // 请求格式/参数的统一

  for(let key in service){

      let api = service[key] // url methods

      // async作用：避免进入回调地狱

      Http[key] = async function(

          params, //请求参数  get: url, put, post, patch(data), delete:url

          isFormData = false, //标识是否是forrm-data请求

          config={} //配置参数

      ){

          let newParams = {} 

          // content-type 是否是form-data的判断

          if(params && isFormData){

              newParams = new FormData()

              for(let i in params){

                  newParams.append(i, params[i])

              }

          }else {

              newParams = params

          }

          // 不同请求的判断

          let response = {} //请求的返回值

          if(api.method === 'put' || api.method === 'post' || api.method === 'patch'){

              try{

                  response = await instance[api.method](api.url, newParams, config)

              }catch(err){

                  response = err

              }

          }else if(api.method === 'delete' || api.method === 'get'){

              config.params = newParams

              try{

                  response = await instance[api.method](api.url, config)

              }catch(err){

                  response = err

              }

          }

          return response //返回响应值

  
  
  

          // let res = null

          // try{

          //     res = await axios.get('url') // 异步函数

          // }catch(err){

          //     res = err

          // }

          // let res2 = await axios.get('url')

      }

  }

  
  

  // 添加请求拦截器

  instance.interceptors.request.use(config=>{

      // 发起请求前

      Toast.loading({

          mask: false, // 是否有阴影

          duration: 0, //持续时间, 0一直展示

          forbidClick: true, //禁止点击

          message: '正在加载...'

      })

      return config

  },()=>{

      // 请求错误

      Toast.clear()

      Toast('请求错误，请稍候重试')

  })

  
  

  // 添加响应拦截器

  instance.interceptors.response.use(res=>{

      Toast.clear()

      return res.data

  }, ()=>{

      Toast.clear()

      Toast('请求错误，请稍候重试')

  })

  
  

  export default Http

  
  

  0 0