封装axios

初始版本

import axios from 'axios'
import config from './config';

let instance = axios.create({
    timeout: 5000,
    baseURL: config.SERVER_BASEPATH
})

//请求拦截
instance.interceptors.request.use(config=>{

    return config
},err=>{

    return Promise.reject(err);
})

//响应拦截
instance.interceptors.response.use(res=>{

    return res
},err=>{

    return Promise.reject(err);
})

/**
 * 请求的方法
 * @param {*} config 请求的配置信息，config.method请求方法，config.params请求参数，config.url请求路由地址
 */
async function http({method = 'get',url,params}){
    let result ;
    if(method === 'get' || method === 'delete'){
        await instance[method](url,{
            params
        }).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }else if(method === 'post' || method === 'put' || method === 'patch'){
        await instance[method](url,params).then(res=>{
            result = res.data
        }).catch(err=>{
            result = err
        })
    }
    return result
}

export default http

封装后端路径

const SERVER_BASEPATH = '后端路径'

export default {
    SERVER_BASEPATH
}

封装过post的版本

import axios from 'axios'

// 开发环境 cnpm run start   development
// 生产环境 cnpm run build   production
// 判断环境
const isDev = process.env.NODE_ENV === 'development'

const ins = axios.create({
  baseURL: isDev ? '接口地址' : '接口地址',
  timeout: 6000
})
// 请求拦截器
ins.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 设定加载的进度条  / 统一传递token 信息(从本地获取)
  config.headers.common['token'] = ''
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
ins.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 进度条消失 /  验证token的有效性
  // if (response.data.code === '10119') { // 我的接口token失效 { code: '10119', message: 'token无效'}
  //   //跳转到登录页面
  // }
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// http://www.axios-js.com/zh-cn/docs/#axios-config
// 自定义各种数据请求 axios({})
export default function request(config){
  let { url, method, data, headers } = config
  url = url || ''
  method = method || 'get'
  data = data || {}
  headers = headers || ''
  // method 转换为大写
  switch (method.toUpperCase()) {
    case 'GET':
      return ins.get(url, { params: data })
    case 'POST':
      // 表单提交  application/x-www-form-url-encoded
      if (headers['content-type'] === 'application/x-www-form-url-encoded') {
        // 转参数 URLSearchParams/第三方库qs
        const p = new URLSearchParams()
        for(let key in data) {
          p.append(key, data[key])
        }
        return ins.post(url, p, {headers})
      }
      // 文件提交  multipart/form-data
      if (headers['content-type'] === 'multipart/form-data') {
        const p = new FormData()
        for(let key in data) {
          p.append(key, data[key])
        }
        return ins.post(url, p, {headers})
      }
      // 默认 application/json
      return ins.post(url, data)
    case 'PUT': // 修改数据 --- 所有的数据的更新
      return ins.put(url, data)
    case 'DELETE': // 删除数据
      return ins.delete(url, {data})
    case 'PATCH': // 更新局部资源
      return ins.patch(url, data)
    default:
      return ins(config)
  }
}

typescript版本

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, Method, AxiosError } from 'axios'

const isDev: boolean = process.env.NODE_ENV === 'development'

const ins: AxiosInstance = axios.create({
  baseURL: isDev ? '接口地址' : '接口地址',
  timeout: 6000
})
// 请求拦截器
ins.interceptors.request.use(function (config: AxiosRequestConfig): AxiosRequestConfig {
  // 在发送请求之前做些什么
  // 设定加载的进度条  / 统一传递token 信息(从本地获取)
  config.headers.common['token'] = ''
  return config;
}, function (error: any): Promise<never> {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
ins.interceptors.response.use(function (response: AxiosResponse<any>): AxiosResponse<any> {
  // 对响应数据做点什么
  // 进度条消失 /  验证token的有效性
  // if (response.data.code === '10119') { // 我的接口token失效 { code: '10119', message: 'token无效'}
  //   //跳转到登录页面
  // }
  return response;
}, function (error: any): Promise<never> {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// http://www.axios-js.com/zh-cn/docs/#axios-config
// 自定义各种数据请求 axios({})
export default function request(config: AxiosRequestConfig): Promise<AxiosResponse<any>>{
  let { url = '', method = 'GET', data = {}, headers = '' } = config
  // url = url || ''
  // method = method || 'get'
  // data = data || {}
  // headers = headers || ''
  // method 转换为大写
  switch (method.toUpperCase()) {
    case 'GET':
      return ins.get(url, { params: data })
    case 'POST':
      // 表单提交  application/x-www-form-url-encoded
      if (headers['content-type'] === 'application/x-www-form-url-encoded') {
        // 转参数 URLSearchParams/第三方库qs
        const p = new URLSearchParams()
        for(let key in data) {
          p.append(key, data[key])
        }
        return ins.post(url, p, {headers})
      }
      // 文件提交  multipart/form-data
      if (headers['content-type'] === 'multipart/form-data') {
        const p = new FormData()
        for(let key in data) {
          p.append(key, data[key])
        }
        return ins.post(url, p, {headers})
      }
      // 默认 application/json
      return ins.post(url, data)
    case 'PUT': // 修改数据 --- 所有的数据的更新
      return ins.put(url, data)
    case 'DELETE': // 删除数据
      return ins.delete(url, {data})
    case 'PATCH': // 更新局部资源
      return ins.patch(url, data)
    default:
      return ins(config)
  }
}