二次封装axios

react二次封装axios

src/request/request.js

//封装axios
import axios from 'axios'
import qs from "qs";
//创建一个axios实例对象
const instance = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 200000, // 请求超时时间
  withCredentials: true // 选项表明了是否是跨域请求
})
//请求前做一下拦截(拦截器),传入两个参数(一个是成功的回调函数,一个是失败的)
instance.interceptors.request.use(config => {
  console.log(config)
  //是因为发送请求,发送请求的数据格式(json,form-data)
  //前后端分离项目(ajax请求请求数据),验证登录,存储token到本地
  //config.params.token = '123'
  const token = localStorage.getItem('token') //登录时存储的token
  if (config.method === 'post' || config.method === 'put') {
    if (token) {
      config.data.token = token
    }
    config.data = qs.stringify(config.data, {
      allowDots: true, //a: { b: { c: 'd', e: 'f' } } => 'a.b.c=d&a.b.e=f'
      arrayFormat: 'repeat' //a:[1,2,3] => a=1&a=2&a=3
    })
  } else if (config.method === 'get' || config.method === 'delete') {
    if (token) {
      config.params.token = token
    }
    config.url = config.url + '?' + qs.stringify(config.params, {
      arrayFormat: 'comma' //a:[1,2,3] => a=1,2,3
    })
    delete config.params
  }
  return config

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

//响应结果后的拦截
instance.interceptors.response.use(result => {
  //result  后端返回的数据结果
  return result.data
}, error => {
  return Promise.reject(error)
});

export default instance

在src/request/api.js

import Axios from './request'
const BASE = process.env.NODE_ENV === 'development' ? '/api/v1' : ''

export default function request(config) {
  if (config.method === 'GET' || config.method === 'get') {
    return Axios.get(BASE + config.url, {
      params: config.data,
      ...config
    })
  } else if (config.method === 'DELETE' || config.method === 'delete') {
    return Axios.delete(BASE + config.url, {
      params: config.data,
      ...config
    })
  } else if (config.method === 'POST' || config.method === 'post') {
    return Axios.post(BASE + config.url, config.data, { ...config })
  } else if (config.method === 'PUT' || config.method === 'put') {
    return Axios.put(BASE + config.url, config.data, { ...config })
  } else if (config.method === 'PATCH' || config.method === 'patch') {
    return Axios.patch(BASE + config.url, config.data, { ...config })
  }
}

把接口封装到一个文件ApiServ.js然后导出

import request from '../../request/api'

export const getLogin = (params) => {
  return request({
    url: `/getLogin`,
    data: params,
    method: 'get',
    headers:{
      'app': '1'
    }
  })
}

最后在页面或状态管理层store进行请求

import { getLogin } from '../ApiServ'//引入接口文件
getLogin = async () => {
    let params = { //请求参数
        userName: this.state.userName,
        passWord: this.state.passWord
    }
    try {
        const { data } = await getLogin(params)
        if (data) {
            console.log(data);
        }
    } catch (error) {

    }
}