由于一般使用axios,但是每个组件使用的话,每次都要调用axios还要写地址,如果想更改服务器的地址的话,就要一个组件一个组件的更改
所以这就是封装的好处
第一步:首先引入axios的依赖
创建utils/request.js
import axios from 'axios'
import Cookies from 'js-cookie'
// 请求头根据自己项目确定是否在此处:请求头添加token
function setAuthorizationHeader(config) {
const _token = Cookies.get('yishi-token')
const prefix = 'Token '
// if has _token, set authorization token into http request headers
if (_token && config && config.headers) {
config.headers['Authorization'] = prefix + _token
}
return config
}
// create an axios instance
const service = axios.create({
// baseURL: 'http://chenyp.top:8008', // url = base url + request url
baseURL: 'http://192.168.1.208:9051', // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
withCredentials: true,
})
// request interceptor
service.interceptors.request.use(
config => {
setAuthorizationHeader(config)
console.log('config', config)
return config
}, error => {
console.log('request中的error', error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
return response.data;
},
error => {
console.log('error', error)
}
)
export default service
第二步、对接口进行二次封装、
src/axios/api/system.js
import request from '../../utils/request'
export function login(data) {
return request({
url: '/api/user/login',
method: 'post',
data
})
}
export function getVulnLib(data) {
return request({
url: '/api/task_lib/list',
method: 'post',
data
})
}
第三步、页面使用
<script>
import {
login } from "@/axios/api/system";
export default {
data() {
return {
};
},
methods: {
loginValidate() {
login().then(res =>{
})
},
},
};
</script>
超级简单的配置,完成!!