项目中接口会很多,个人喜欢创建api文件对请求统一管理
1.新建api文件夹,文件夹下创建 axios.js,login.js
2. axios.js
import axios from 'axios'import router from '../router'
//引入路由是为了做重定向,比如没有登录过期定向到登录页面
// 创建axios实例
const instance = axios.create({
baseURL: '', // api的base_url
timeout: 15000, // 请求超时时间
headers: { 'content-type': 'application/json;charset=UTF-8' }
})
// 拦截请求
instance.interceptors.request.use(config => {
// 可以在此处添加 token
return config
},error => {
return Promise.reject(error)
})
// 拦截响应
instance.interceptors.response.use(res => {
//可以在此处拦截接口错误
return res}, error => {
return Promise.reject(error)
})
export default instance复制代码
3. login.js
此文件我一般安装模块来创建多个
import instance from '@/api/axios'//引入axios文件
export function loginByUsername(obj) {
return instance.post(`/api/a/login`, obj)
}
export function logout() {
// 退出
return instance.post(`/api/a/logout`)
}复制代码
4. login.vue
<template>
登录的实现
</template>
<script>
import { loginByUsername } from "@/api/login"
//引入api文件methods: {
login(){
var obj = {name:'test',password:'test'}
loginByUsername(obj).then(res=>{
console.log(res)
})
}
}
</script>复制代码