vue项目中axios模块封装和axios拦截器interceptors使用

axios

GitHub地址: https://github.com/axios/axios
中文网: http://www.axios-js.com/zh-cn/docs/

axios 封装

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

import axios from 'axios'

// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入
const http = axios.create({
  baseURL: 'https://m.maizuo.com',
  timeout: 10000, // 10s 内未请求到数据
  headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})

export default http

• 项目内使用这个 “http”

<script>
// 使用时先导入封装好的 http
// import http from '../util/http' // 项目中 别名  @ ==> src的绝对路径
import http from '@/util/http' // 项目中 别名  @ ==> src的绝对路径


export default {
  data () {
    return {
      filminfo: null, // null为假, 空数组[]和空对象{}都是真, 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 拦截器

请求拦截—发起异步请求之前先做什么

axios.interceptors.request()

响应拦截—得到响应的数据先做什么

axios.interceptors.response()

由于axios已经被封装为http所以使用的时候要写成 http.interceptors…

在异步请求数据的时候加一些样式在,
例如, vant组件库的 Toast 轻提示

• 
  这时的http.js文件

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()

// Add a request interceptor
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) {
  // Do something with request error
  return Promise.reject(error)
})

// Add a response interceptor
http.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  // 在拿到响应的数据后
  // 手动清除 Toast
  Toast.clear()
  
  return response
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error
  return Promise.reject(error)
})

export default http