1.安裝并引入

yarn add axios
import axios from 'axios' //在js文件中引入

2.配置

axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:8080'
axios.defaults.withCredentials = true

3.請(qǐng)求攔截與響應(yīng)攔截

// 請(qǐng)求攔截
axios.interceptors.request.use(
  config => {
    // 配置通用參數(shù)
    return config
  },
  err => {
    return Promise.reject(err)
  }
)

// 響應(yīng)攔截
axios.interceptors.response.use(
  response => {
    if (response) {
      // 響應(yīng)處理
    }
    return response
  },
  error => {
    return Promise.reject(error.response.data)
  }
)

4.封裝get post put delete請(qǐng)求

/**
 * get請(qǐng)求
 * @param url
 * @param params
 * @returns {Promise}
 */
const get = (url, params) => {
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.get(url, {
        params: params
      })
      resolve(res)
    } catch (err) {
      reject(err)
    }
  })
}

/**
 * post請(qǐng)求
 * @param url
 * @param params
 * @returns {Promise}
 */
const post = (url, params) => {
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.post(url, params)
      resolve(res)
    } catch (err) {
      reject(err)
    }
  })
}

/**
 * put請(qǐng)求
 * @param url
 * @param params
 * @returns {Promise}
 */
const put = (url, params) => {
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.put(url, params)
      resolve(res)
    } catch (err) {
      reject(err)
    }
  })
}

/**
 * delete請(qǐng)求
 * @param url
 * @param params
 * @returns {Promise}
 */
const del = (url, params) => {
  return new Promise(async (resolve, reject) => {
    try {
      const res = await axios.delete(url, {
        data: params
      })
      resolve(res)
    } catch (err) {
      reject(err)
    }
  })
}

5.導(dǎo)出

export default {
  get,
  post,
  put,
  del
}