封装
axios.js
import axios from 'axios'
import {
baseURL
} from '@/config'
class HttpRequest {
constructor (baseURL = baseURL) {
this.baseURL = baseURL
this.queue = {} // 队列中有请求时 显示loadong界面, 反之同理
}
getInsideConfig () {
const config = {
baseURL: this.baseURL,
header: {
//
}
}
return config
}
// 全局响应拦截器
interceptors (instance, url) {
instance.interceptors.request.use(config => { // 请求拦截器
// 添加全局的loading...
// Spin.show() ---遮罩组件
// 队列中有请求时 显示loadong界面, 反之同理
if (!Object.keys(this.queue).length) {
// Spin.show()
}
this.queue[url] = true
console.log(config)
/*
* {adapter: ƒ, transformRequest: {…}, * transformResponse: {…}, timeout: 0, xsrfCookieName: * "XSRF-TOKEN", …}
* adapter: ƒ xhrAdapter(config)
* baseURL: undefined
* data: undefined
* header: {}
* maxContentLength: -1
* method: "get"
* timeout: 0
* transformRequest: {0: ƒ}
* transformResponse: {0: ƒ}
* url: "/userinfo"
* validateStatus: ƒ validateStatus(status)
* xsrfCookieName: "XSRF-TOKEN"
* xsrfHeaderName: "X-XSRF-TOKEN"
* __proto__: Object
*/
return config
}, error => {
return Promise.reject(error)
})
instance.interceptors.response.use(res => { // 响应拦截器, res为服务端返回数据
delete this.queue[url]
console.log(res)
/*
* {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
* config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
* data: {code: 1, msg: "请先登陆"}
* headers: {date: "Wed, 29 May 2019 17:14:59 GMT", etag: "W/"1f-DqVJ3VSipebpjnlLj9vGsYkCMOw"", x-powered-by: "Express", content-length: "31", content-type: * "application/json; charset=utf-8"}
* request: XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
* status: 200
* statusText: "OK"
* __proto__: Object
*/
const {
data,
status
} = res
return {
data,
status
}
}, error => {
delete this.queue[url]
return Promise.reject(error)
})
}
request (options) {
console.log(options) // {url: "/userinfo", method: "get"}
const instance = axios.create()
// 合并为一个对象, 如果有相同的key值 后者覆盖前者
options = Object.assign(this.getInsideConfig(), options)
this.interceptors(instance, options.url)
return instance(options)
}
}
export default HttpRequest
api/index.js
import HttpRequest from '@/lib/axios'
const axios = new HttpRequest()
export default axios
-
使用
import axios from './index'
export const getUserInfo = ({ userId }) => {
return axios.request({
url: '/userinfo',
method: 'post',
data: {
userId: userId
}
})
}
- 在页面中引入使用
- home.vue
<template>
<div>
<h1>home page</h1>
</div>
</template>
<script>
import { getUserInfo } from '@/api/user';
export default {
mounted () {
this.getInfo()
},
methods: {
getInfo () {
getUserInfo({ userId: 21 }).then(res => {
console.log(res)
})
}
}
}
</script>