axios总结

::: tip
使用axios与后端通信
:::

一、在vue中使用axios

import axios from 'axios' //引入axios
// 创建一个axios实例
const service = axios.create({
  baseURL: '', //请求的基本路径
  timeout: 5000, //请求超时时间
  headers: {
    token: '' //在请求头中携带token
  }
})

// 默认 post 请求，使用 application/json 形式
service.defaults.headers.post['Content-Type'] = 'application/json'

// 请求拦截器
service.interceptors.request.use(config => {
  //请求之前的逻辑处理
  return config
}, err => { //发生错误
  return Promise.reject(err)
}

// 响应拦截器
service.interceptors.response.use(response => {
  //响应后的逻辑处理
  return response
}, err => { //发生错误
  return Promise.reject(err)
}

export default service //导出实例

二、axios的get请求

  //发起不带参的get请求
  axios.get('url')

  //发起带参的get请求
  axios.get('url',{
    params:{
      id: 1,
      name: zs
    }
  })

  //使用params形式传参也就等于下面这种请求方式
  axios.get(`url?id=${id}&name=${name}`)

  //当后端使用@PathVariable的方式时
  axios.get(`url/${id}/${name}`)

三、axios的post请求

  //使用application/json形式传递参数
  axios.defaults.headers.post['Content-Type'] = 'application/json'
  axios.post('url', data)

  //使用键值对形式传参
  - 1. 先设置post请求的方式
  - 2. 引入qs
  - 3. qs.stringfy()
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
  axios.post('url', qs.stringfy({
    id: id
  }))

四、axios的put请求

  //使用put请求传递数组(根据后端来进行改变)
  axios.put('url', arr)

五、axios的delete请求

  //使用delete请求传递数组
  axios.delete('url', {
    data: arr //arr是要传递的数组
  })

六、在axios请求中实现全局Loading效果

• 需要引入一个vue-nice-loading插件

• vue-nice-loading使用方式

  • // loading动画 import loading from 'vue-nice-loading'
  • Vue.use(loading)

import axios from 'axios'
import {
  baseURL
} from '@/utils/index'
import Vue from 'vue'
import store from '@/store/index'

// 创建一个axios实例
const service = axios.create({
  baseURL: baseURL,
  timeout: 5000,
  headers: {
    token: store.state.token
  }
})

// 默认 post 请求，使用 application/json 形式
service.defaults.headers.post['Content-Type'] = 'application/json'

// 记录请求次数
let needLoadingRequestCount = 0
let loading
// 定时器
let timer

// loading样式
function startLoading () {
  loading = Vue.prototype.$loading({
    text: '服务器繁忙,请耐心等待₍ᐢ.ˬ.⑅ᐢ₎',
    background: 'rgba(0, 0, 0, 0.5)'
  })
}

function endLoading () {
  // 延迟500ms，防止网速特快加载中画面一闪而过
  if (loading) loading.close()
}

// 打开loading
function showFullScreenLoading () {
  if (needLoadingRequestCount === 0) {
    // 如果请求时间超过1s 再出现loading效果
    timer = setTimeout(() => {
      startLoading()
    }, 1000)
  }
  needLoadingRequestCount++
}
// 关闭loading
function tryHideFullScreenLoading () {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

// 请求拦截器
service.interceptors.request.use(config => {
  showFullScreenLoading()
  return config
}, err => {
  tryHideFullScreenLoading()
  return Promise.reject(err)
})

// 响应拦截器
service.interceptors.response.use(response => {
  // 清除定时器
  clearTimeout(timer)
  tryHideFullScreenLoading()
  return response
}, err => {
  tryHideFullScreenLoading()
  if (err.code === 'ERR_NETWORK') {
    Vue.prototype.$message.error('网络出现异常,请刷新重试!')
  }
  return Promise.reject(err)
})

export default service