1、封装的axios文件代码如下
import axios from 'axios'
import { apiDataServer } from '../config'
import { Loading } from 'element-ui'
let loading
function startLoading () { // 使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading () { // 使用Element loading-close 方法
loading.close()
}
// 那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
// 声明一个变量 needLoadingRequestCount,每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
// 调用tryHideFullScreenLoading()方法,needLoadingRequestCount - 1。needLoadingRequestCount为 0 时,结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
class HttpRequest {
constructor (url = apiDataServer) {
this.baseUrl = url
}
getInsideConfig () {
return {
baseURL: this.baseUrl
// 处理headers
// headers: {}
}
}
interceptors (instance) {
instance.interceptors.request.use(config => {
// 请求拦截处理
showFullScreenLoading() // 开始加载loading
// 给所有请求参数都进行Unicode加密
if (config.params) {
config.params.jsonData = encodeURIComponent(JSON.stringify(config.params.jsonData))
}
return config
}, error => {
return Promise.reject(error)
})
instance.interceptors.response.use(res => {
tryHideFullScreenLoading() // 结束加载loading
return res.data
}, error => {
return Promise.reject(error)
})
}
request (options) {
const instance = axios.create()
options = Object.assign(this.getInsideConfig(), options) // 合并对象
this.interceptors(instance)
return instance(options)
}
}
export default HttpRequest
注:这里importzhong 的config文件是根据全局的开发环境还是生产环境,设置请求接口的地址
export let apiDataServer = process.env.NODE_ENV === 'production'
? 'http://localhost:63342/test-web/dist/' : 'http://60.191.73.154:11006'
2、使用自己封装好的axios文件
import HttpRequest from './axios' // 引入咱们刚刚封装好的axios
const axios = new HttpRequest()
export getAreaInfo = () => { // 获取区县信息
return axios.request({
url: '/abc/bcd/mn.json',
method: 'get'
})
},
export getSearchResultData = (data) => { // 获取查询结果
return axios.request({
url: '/abc/bcd/mnxyz.json',
method: 'get',
params: { jsonData: data }
})
}
注:这里分别展示了没有请求参数的get请求和带有请求参数的get请求,带有参数的请求,会自动在请求拦截中进行Unicode加密