美文网首页
axios 封装

axios 封装

作者: 冰落寞成 | 来源:发表于2021-04-13 15:26 被阅读0次

把axios 封装,可以很好的使用过滤器,封装如下:

import axios from 'axios'
const baseURL="http://192.168.X.X"
const request = axios.create({
  baseURL: baseURL,
  timeout: 8000
})
request.interceptors.request.use(

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

request.interceptors.response.use(
  response => {
    const res = response.data
    return res
  },
  error => {
    return Promise.reject(error)
  }
)
/**
 * @description: get请求
 * @param {string} url 请求链接段
 * @param {object} params 请求参数
 * @param {object} config 请求配置
 * @return {*}
 */
const get = (url, params, config) => {
  const reqData = {
    method: 'get',
    url,
    params
  }
  if (config) {
    Object.assign(reqData, config)
  }
  return request(reqData)
}

/**
 * @description: post请求
 * @param {string} url 请求链接段
 * @param {object} params 请求参数
 * @param {object} config 请求配置
 * @return {*}
 */
const post = (url, data, config) => {
  const reqData = {
    method: 'post',
    url,
    data
  }
  if (config) {
    Object.assign(reqData, config)
  }
  return request(reqData)
}
/**
 * @description: post请求
 * @param {string} url 请求链接段
 * @param {object} params 请求参数
 * @param {object} config 请求配置
 * @return {*}
 */
const postFile = (url, data, params, config) => {
  const reqData = {
    method: 'post',
    url,
    data,
    params
  }
  if (config) {
    Object.assign(reqData, config)
  }
  return request(reqData)
}
/**
 * @description: post请求(参数拼接式,类get)
 * @param {string} url 请求链接段
 * @param {object} params 请求参数
 * @param {object} config 请求配置
 * @return {*}
 */
const postOfGet = (url, params, config) => {
  const reqData = {
    method: 'post',
    url,
    params
  }
  if (config) {
    Object.assign(reqData, config)
  }
  return request(reqData)
}
const postOfForm = (url, formData, params, config) => {
  let resultUrl = url
  if (params) {
    let appendUrl = ''
    Object.keys(params).forEach((item, idx) => {
      if (idx === 0) {
        appendUrl += '?'
      } else {
        appendUrl += '&'
      }
      appendUrl += item + '=' + params[item]
    })
    if (appendUrl) {
      resultUrl += appendUrl
    }
  }
  // 配置默认headers
  if (config && !config.headers) {
    config.headers = { 'Content-Type': 'multipart/form-data' }
  } else {
    config = { headers: { 'Content-Type': 'multipart/form-data' } }
  }
  return post(resultUrl, formData, config)
}
export { request, get, post, postOfGet, postOfForm, postFile }

在api 里掉用如下:

import { request, get, post, postFile, postOfGet } from '@/utils/request'
/**
 * 添加商品
 * @param {object} data
 * @param {*} config
 * @returns 无
 */
export function addGoods (data, params, config) {
  var configs = {
    headers: { 'Content-Type': 'multipart/form-data' }
  }
  return postFile('/Product/add', data, params, configs)
}
/**
 * 更新商品
 * @param {*} data
 * @param {*} config
 * @returns
 */
export function updateGoods (data, params, config) {
  var configs = {
    headers: { 'Content-Type': 'multipart/form-data' }
  }
  return postFile('/Product/update', data, params, config)
}

相关文章

网友评论

      本文标题:axios 封装

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