axios拦截器的封装

首先封装axios 

创建axios.js文件

import axios from 'axios'
// 向service传入 url, methods, params 先请求拦截器 再响应拦截器

// 先声明axios实例
const service = axios.create({
  baseURL: 'https://www.easy-mock.com/mock/5d3aa8ff9a96ea765f8076bd/lsit',
  timeout: 3000
})
// 响应拦截器
service.interceptors.response.use((res) => {
  loading.close() // loading关闭
  return res
} ,(err) => {
  this.$message({
    message: '请求失败',
    type: 'error'
  });
  return Promise.reject(err)
})

// 请求拦截器
service.interceptors.request.use((config) => {
  loading() // loading 加载相关
  config.methods === 'POST'
  ? config.data = qs.stringify(config.params) // post 参数 data
  : config.params == config.params // get 参数 params
  return config
}, (err) => {
  this.$message({
    message: '请求失败',
    type: 'error'
  })
  return Promise.reject(err)
})

export default service

接口api定义～

创建api.js

// 引入axios封装文件
import service from './axios'
 
export const getCity = params => {
    return service({
        url: '/city',
        method: 'get',
        params
    })
};

// service里的参数是config

使用：先引入接口文件～

import { getCity } from './api'
export default {
  mounted () {
    this.getCity()
  },
  methods: {
    async getCity () {
      let res = await getCity()
      console.log('getCity', res)
    }
  }
}

结果

以上all～

参考文章： https://blog.csdn.net/qq_38145702/article/details/81558816