项目中 axios拦截器的使用总结

1.axios 封装

首先在项目中创建一个 util 文件夹, 在创建一个http.js文件用来封装axios

import axios from 'axios'

// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入

const http = axios.create({
  baseURL: "xxxxxxx",
  timeout: 3000, // 3s 内未请求到数据
  headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})
export default http

在项目中引入http.js并使用

<script>
// 使用时先导入封装好的 http
// import http from '../util/http'
import http from '@/util/http'

export default {
  data () {
    return {
      filminfo: null,
      isShow: false
    }
  },
  mounted () { // 在详情的组件中利用mounted生命周期获取传过来的数据
    // console.log('利用获取的id, 发送ajax请求数据', this.$route) // this.$route内包含整router对象
    // console.log('通过params获得的id数据:', this.$route.params.id)
    http({
      url: `/gateway?filmId=${this.$route.query.id}&k=4689903`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      console.log(res.data.data.film)
      this.filminfo = res.data.data.film
    })
  }
}
</script>

添加axios拦截器

import axios from 'axios'
import { Toast } from 'vant' // van组件库图片预览函数, 函数不需要use
// Vue.use(Toast)
const http = axios.create({
  baseURL: 'https://m.maizuo.com',
  timeout: 10000,
  headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})
// axios 拦截器
// 请求拦截
// http.interceptors.request()
// 响应拦截
// http.interceptors.response()

//添加请求拦截器

http.interceptors.request.use(function (config) {
  // Do something before request is sent
  // 在发起异步请求时
  // 启动 loading
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
    overlay: true,
    loadingType: 'spinner',
    duration: 0
  })
  return config
}, function (error) {
  return Promise.reject(error)
})
//添加响应拦截器
http.interceptors.response.use(function (response) {
  // 在拿到响应的数据后手动清除 Toast
  Toast.clear()
  return response
}, function (error) {
  return Promise.reject(error)
})
export default http