1、在src 下创建一个名为http的文件夹
2、在其下创建api.js
存放网络请求
//封装所有的请求
import service from './index'
export default {
// login({ username, password }) {
// return service.post('/login', { username, password })
// },
//1、获取首页数据(get)
getHomeDate() {
return service.get('/recommend')
},
//2. 搜索(get)
getSearchDate({ value }) {
return service.post('/search', { value })
},
}
在index.js
完成引用
//封装axios
import axios from 'axios'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { Message } from 'element-ui'
// 运行环境: 本地环境:devlpment 和线上(生产)环境: production
const isPro = process.env.NODE_ENV === 'production'
// 创建一个axios的实例
const service = axios.create({
// 基础路径: 需要根据当前的运行环境来判断
baseURL: isPro ? '线上的接口路径' : '/api',
// 超时时间
timeout: 100000
})
// 请求拦截: 每一次发请求都会做的事情
service.interceptors.request.use((config) => {
nprogress.start()
// 前后端鉴权
// jwt: JSON WEB TOKEN
// 登录成功之后 后端会返回一个令牌
let token = localStorage.getItem('adminToken')
if (token) {
// 需要在请求头当中添加token
config.headers['Authorization'] = token
}
return config
}, err => {
nprogress.done()
return Promise.reject(err)
})
// 响应拦截: 每一次接口返回数据的时候都会做的事情
service.interceptors.response.use((res) => {
nprogress.done()
return res.data
}, err => {
if (err.response && err.response.status) {
// 错误请求的状态码
let status = err.response.status
if (status === 400) {
Message.error('参数错误')
}
if (status === 401) {
Message.error('登录过期,请重新登录')
}
if (status === 403) {
Message.error('没有权限')
}
if (status === 404) {
Message.error('接口路径错误')
}
if (status === 500) {
Message.error('服务器出错')
}
if (status === 503) {
Message.error('服务器在维护')
}
}
return Promise.reject(err)
})
export default service
3、在App.vue
下的 main.js
下挂载
import api from './http/api'
//挂载在原型对象上
Vue.prototype.$api = api
4、在组件中引用
this.$api.函数名 完成引用
//如下
this.$api
.getCard()
.then((res) => {
this.list = res.shopList?res.shopList:[];
window.console.log(this.list);
})
.catch((err) => {
window.console.log(err);
});