封装axios

我们在使用axios 时每个页面都去单独使用会导致许多代码的重复，这时候就需要我们对axios根据项目需要进行二次封装，这样我们在使用时只需要在每个页面去调用接口就可以了。
在src目录下新建文件夹axios,在文件夹里新建http.js文件和api.js文件
在http.js页面里我们需要对axios进行封装，代码如下

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

axios.defaults.withCredentials = true
axios.defaults.baseURL = ''

// 创建axios实例
const service = axios.create({
  // baseURL: process.env.API_HOST, // api 的 base_url
  timeout: 5000, // 请求超时时间,
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})

// request拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    // Do something with request error
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    console.log(response)
    /**
     * code为非200是抛错 可结合自己业务进行修改
     */

    if (response.status !== 200) {
      Message({
        message: response.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    Message({
      message: error.msg,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

然后是对接口的封装，在api.js文件下代码如下,先引入http.js组件

import request from '@/axios/http.js'

export function getRedisIpList(data) {
    return request({
      url: 'xxxxx',
      method: 'post', 
    })
  }
export function getElasticsearchOverview(params) {
    return request({
      url: 'xxxxxxx'+params,
      method: 'get',
    })
  }

最后是在组件里面进行调用

impor {getRedisIpList} from ‘@/接口路径’
getRedisIpList().then(res => {
        //成功返回什么
        })
        .catch(err => {
         //失败返回什么
        })

以上封装加调用，完成