vue 中创建 啊 api 中 axios.js 文件
// 对axios 的 二次封装
import axios from "axios"
// 引入进度条
import nprogress from "nprogress"
// 引入进度条的样式
import "nprogress/nprogress.css"
// 在当前模块中引入 store
import {vm} from '@/main'
// 1.利用 axios 对象的方法create,去创建一个axios 实例
// 2.request就是axios,只不过就是配置一下
const requests = axios.create({
// 配置对象
// 基础路径,发请求的时候,路劲当中会出现api
baseURL:"/api",
// 代表请求超时的时间5s
timeout:5000,
})
// 请求拦截器
requests.interceptors.request.use((config)=>{
// config: 配置对象。对象里面有一个属性很重要,header请求头
// 进度条开始动
nprogress.start()
if(vm.$store.state.detail.uuid_token){
// 请求头添加一个字段,和后台说好
config.headers.userTempId = vm.$store.state.detail.uuid_token
}
// 需要携带token带给服务器
if(vm.$store.state.user.token){
config.headers.token = vm.$store.state.user.token
}
return config
})
// 响应拦截器
requests.interceptors.response.use(
res => {
// 成功的回调
// 进度条结束
nprogress.done()
return res.data
},
error => {
// 失败的回调
return Promise.reject(new Error('faile'))
}
)
// 对外暴露
export default requests
创建 config 文件 保存 接口 地址
export default { title:'admin', baseUrl:{ // 开发环境 dev:'api/', // 生产 pro:'' } }
api 文件下面创建 data.js 请求接口数据
import axios from './axios'
export const getNameData = () => {
return axios.request({
url:'home/nameData',
method:'get',
})
}
export const buyData = () => {
return axios.request({
url:'home/buyData',
method:'get'
})
}
下载mockjs npm i mockjs 配置接口 api 文件夹下面新建mock.js 文件
import Mock from 'mockjs'
const code = 200
const domain = '/api/home'
const nameData = res => {
let names = [
{
name:'张三',
age:'19',
sex:'男'
},
{
name:'李四',
age:'10',
sex:'男'
},
]
return {
names,
code
}
}
Mock.mock(`${domain}/nameData`, 'get', nameData)
mian.js 页面中引入mock文件
// 引入 Mock
import Mock from './api/mock'
process.env.MOCK && Mock
组件中使用
导出data文件请求接口的方法
import {getNameData} from '../api/data'
mounted() {
getNameData().then((res)=>{
console.log(res);
})
// this.$axios.get("/api/home/nameData").then((res)=>{
// console.log(res);
// })
},
页面显示