2回答

• 

  慕九州9057380

  2020-04-08 16:40:33

  import axios from 'axios'

  import service from './contactApi'

  import { Toast } from 'vant'

  
  

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

  let instance = axios.create({

    // 注意地址的拼写

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

    timeout: 1000

  })

  
  

  let Http = {}; //包裹请求方法的容器

  
  
  

  // 2.请求格式或者参数的统一

  for (let key in service) {

    let api = service[key]; // url method

    console.log(api)

    console.log(key)

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

    Http[key] = async function (

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

      isFormdata = false, // 判断是否是form-data请求

      config = {} //配置参数

    ) {

      // let url = api.url

      let newParams = {}

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

      if (params && isFormdata) {

        newParams = new FormData();

        for (let i in params) {

          // 转换form-data的格式

          newParams.append(i, params[i]);

        }

      } else {

        newParams = params;

      }

      // 4.不同的请求判断

      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') {

        try {

          config.params = newParams;

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

        } catch (err) {

          response = err;

        }

      }

      return response;   // 返回响应值

    }

  
  

  }

  
  
  
  

  // 拦截器的添加

  
  

  // 5.请求拦截器

  instance.interceptors.request.use(

    // 发起请求前

    config => {

      Toast.loading({

        mask: true, //是否显示阴影

        duration: 0, // 0是一直存在阴影，默认的是1000ms

        forbidClick: true, //禁止点击

        message: '加载中...'

      })

      return config

    },

    // 请求失败

    () => {

      Toast.clear()

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

    }  

  )

  
  

  // 6.响应拦截器

  instance.interceptors.response.use(

    // 请求成功

    res => {

      Toast.clear()

      return res.data

    },

    () => {

      Toast.clear()

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

    }

  )

  
  

  export default Http

  
  

  0 2
• 

  慕九州9057380

  2020-04-08 16:40:05

  import axios from 'axios'import service from './contactApi'import { Toast } from 'vant'// 1.service 循环遍历出不同的请求方法let instance = axios.create({  // 注意地址的拼写  baseURL: 'http://localhost:9000/api',  timeout: 1000})let Http = {}; //包裹请求方法的容器// 2.请求格式或者参数的统一for (let key in service) {  let api = service[key]; // url method  console.log(api)  console.log(key)  // async的作用：避免进入回调地狱  Http[key] = async function (    params,   // 请求参数 get(url)，put,post,,patch(data),delete(url)    isFormdata = false, // 判断是否是form-data请求    config = {} //配置参数  ) {    // let url = api.url    let newParams = {}    // 3.content-type是否是form-data的判断    if (params && isFormdata) {      newParams = new FormData();      for (let i in params) {        // 转换form-data的格式        newParams.append(i, params[i]);      }    } else {      newParams = params;    }    // 4.不同的请求判断    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') {      try {        config.params = newParams;        response = await instance[api.method](api.url, config);      } catch (err) {        response = err;      }    }    return response;   // 返回响应值  }}// 拦截器的添加// 5.请求拦截器instance.interceptors.request.use(  // 发起请求前  config => {    Toast.loading({      mask: true, //是否显示阴影      duration: 0, // 0是一直存在阴影，默认的是1000ms      forbidClick: true, //禁止点击      message: '加载中...'    })    return config  },  // 请求失败  () => {    Toast.clear()    Toast('请求错误，请稍后重试')  }  )// 6.响应拦截器instance.interceptors.response.use(  // 请求成功  res => {    Toast.clear()    return res.data  },  () => {    Toast.clear()    Toast('请求错误，请稍后重试')  })export default Http

  
  

  0 0