Vue中自定义拦截器

Vue中自定义拦截器

拦截器、Api、页面调用的相互关系如图

1. 拦截器实现代码

import axios from 'axios'

/**
 * 创建你axios实例
 */
const instance = axios.create({
  baseURL: '', // api的base_url
  timeout: 10000, // 请求超时时间
  withCredentials: false, //跨域请求时发送cookies
  // transformRequest: data => qs.stringify(data) //
})

/**
 * request拦截器
 */
instance.interceptors.request.use(
  e => {
    e.params = e.params || {}
    e.headers = e.headers || {}
    //set 默认值
    return e
  },
  error => ({ status: 0, msg: error.message })
)

/**
 * respone拦截器
 */
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (response.status === 200) {
      return resp
    }
    return resp
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default instance

2. Api.js实现代码

import request from '@/js/utils/requst'

//调用后台数据
export function getProvince(url) {
    return request({
        url: url,
        method: 'get',
    })
}

3. vue调用实现代码：

import { getProvince } from "@/api/district";

getProvince(url).then(response => {
		this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load(response, {
			stroke: Cesium.Color.HOTPINK,
			fill: Cesium.Color.PINK.withAlpha(0.5),
			strokeWidth: 3
		}));
	})
	.catch(error => {
		console.log(error);
	})
	.finally(error => {
		console.log(error);
	})

附：import 引用的区别

1. import 引用使用{}的情况

improt {getName} from "@/api/login"

import request from '@/js/utils/requst'

// 提交到后台 
export function getName(url) {
    return request({
        url: url,
        method: 'get',
    })
}

1. import 引用不使用{}的情况

improt getName from "@/api/login"

import request from '@/js/utils/requst'

// 提交到后台 
export defalut function getName(url) {
    return request({
        url: url,
        method: 'get',
    })
}

// 提交到后台 
export function getProvince(url) {
    return request({
        url: url,
        method: 'get',
    })
}