Axios 的基本使用

安装 axios

npm install axios -s

引入 axios 和 Element-ui Message 提示框

import axios from 'axios'
import Message from 'element-ui'

axios 配置

const beseURL = ''

if (process.env.NODE_ENV == 'development') {
  baseURL = 'https://www.baidu.com'
} else if (process.env.NODE_ENV == 'debug') {
  baseURL = 'https://www.ceshi.com'
} else if (process.env.NODE_ENV == 'production') {
  baseURL = 'https://www.production.com'
}

axios.create({
  timeout: 7000, // 请求超时时间
  baseURL: beseURL,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8',
  },
})

axios 请求前拦截

axios.interceptors.request.use((config) => {
  // 请求前的一些封装逻辑
  // 可以对请求前数据做一些操作，  比如  Qs.stringify() 转义，或者需要做一些统一的格式处理
  return config
})

axios 请求响应拦截

axios.interceptors.response.use(
  (response) => {
    // 请求返回时的处理，比如状态码  404  500 都可以做一些封装处理，根据自己的需要
    return response
  },
  (error) => {
    return error
  }
)

get 请求封装

export function get(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, data).then(
      (response) => {
        if (response.data.code === 200) {
          resolve(response.data.data)
        } else {
          Message.error(response.data.msg)
        }
      },
      (err) => {
        reject(err)
        let message = '请求失败！请检查网络'
        if (err.response) message = err.response.data.message
        Message.error(message)
      }
    )
  })
}

post 请求封装

export function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      (response) => {
        if (response.data.code === 200) {
          resolve(response.data.data)
        } else {
          Message.error(response.data.msg)
        }
      },
      (err) => {
        reject(err)
        let message = '请求失败！请检查网络'
        if (err.response) message = err.response.data.message
        Message.error(message)
      }
    )
  })
}

最后导出

// 引入时候可以挂载到全局，也可以自己写个 api 文件里面
export default {
  post,
  get,
}