×

Axios数据:封装请求的方法DEMO

作者:andy0012019.01.21来源:Web前端之家浏览:620评论:0
关键词:Axios

Axios数据:封装请求的方法DEMO。上代码:

import axios from 'axios'
import Qs from 'qs'
import { Notification } from 'element-ui'
import { API_HOST } from '@/config'
import { getToken } from '@/utils/auth'

// 若有多个业务域名,则创建多个实例
const instance = axios.create({
  baseURL: API_HOST || process.env.VUE_APP_API_HOST,
  timeout: 10 * 1e3
})

/**
 * 实例请求拦截函数
 * @param  {Object} config 请求配置信息
 * @return {Object | Promise}        请求配置信息或错误信息
 */
instance.interceptors.request.use(config => {
  // Set token here
  config.headers['TICKET'] = getToken()

  // transform post data to queryString
  if (config.method === 'post' && config.headers['Content-Type'] !== 'multipart/form-data') {
    config.data = Qs.stringify(config.data)
  }

  // 文件上传
  // 只需要在Post请求时候将opts的headers属性设置为
  // { 'Content-Type': 'multipart/form-data' }
  // 即可。例:
  // const uploadImage = params => request('post', '/upload', params, {
  //   headers: {
  //     'Content-Type': 'multipart/form-data'
  //   }
  // })
  //
  // 下面以使用FormData的file字段名来保存文件举例。
  // 若为单图上传,则将File类型保存到字段名`file`中即可。
  // 若为多图上传,则需将File类型的数据数组保存在`file[]`形式的字段内。
  if (config.headers['Content-Type'] === 'multipart/form-data') {
    const { data } = config
    let fd = new FormData()

    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        if (key.endsWith('[]')) {
          data[key].forEach(item => {
            fd.append(key, item);
          })
        } else {
          fd.append(key, data[key])
        }
      }
    }

    config.data = fd;
  }

  return config
}, err => {
  return Promise.reject(err)
})

/**
 * 实例响应拦截函数
 * @param  {Object} res 请求响应信息
 * @return {Object | Promise}     请求响应信息或错误信息
 */
instance.interceptors.response.use(res => {
  const { data } = res

  if (data.code && data.code === '200') {
    return data
  } else if (data.code && data.code === '401') {
    window.location.href = '/path_to_your/login.html'
    return Promise.reject(data)
  } else {
    Notification.error(data.msg || '接口返回出错!')
    return Promise.reject(data)
  }
}, err => {
  if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
    Notification.error('接口请求超时,请刷新!')
  } else {
    Notification.error(err.msg || '接口返回出错!')
  }

  return Promise.reject(err)
})

/**
 * 封装后导出的数据请求函数
 * @param  {String} method HTTP请求类型
 * @param  {String} path   请求路径
 * @param  {Object} params 请求参数
 * @param  {Object} opts   请求配置参数
 * @return {Promise}       异步Promise
 */
export default function (method, path, params = {}, opts = {}) {
  method = method.toLowerCase()

  switch (method) {
    case 'get':
      return instance.get(path, { params })
    case 'post':
      return instance.post(path, params, opts)
    case 'delete':
      return instance.delete(path, { params })
    case 'put':
      return instance.put(path, params)
    default:
      return Promise.reject(`未知的method---${method}`)
  }
}

学习下咯。        

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/JS2384203858.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 菜鸟日记

    有点东西。来学习一下~...

  • 码云笔记

    你好,前端博客-www.mybj123.com申请友链,有兴趣请联系QQ3261229068...

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero