首先在vue项目下安装axios以及支持异步提示的iView组件库
npm install axios
npm install iview
在src文件夹下新建
axios
文件夹,在其中新建api.js
用于存放接口,request.js
用于封装axios对象
编写
request.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
import axios from "axios"; import Vue from 'vue' const service = axios.create({ // baseURL: process.env.BASE_URl, baseURL: "http://localhost:8081/api", timeout: 5000 }); //axios对象,设置公共地址和超时 //请求拦截 service.interceptors.request.use(config => { Vue.prototype.$Loading.start();//异步加载的进度条 config.headers['token'] = window.localStorage.getItem('token');//公共请求头 return config; },error => { Vue.prototype.$Loading.error(); console.log(error) }); // 响应拦截 service.interceptors.response.use(response => { Vue.prototype.$Loading.finish(); if (response.status.code === 200){ return response.data.data; } else{ console.log("请求出错") } },error => { Vue.prototype.$Loading.error(); console.log(error) }); export default service;
最后将service暴露出去,在
api.js
中引入service,即可使用包装好的axios,包括baseUrl和token请求头,以及对响应的判断,这样的话在api.js中只需要关注业务就行。编写
api.js
1 2 3 4 5 6 7 8 9 10 11
import service from './request' export const login = data => { return service({ url: '/user/login', method: 'post', data: JSON.stringify(data) }) } //..others
- 在页面中使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
import {login} from "../axios/api" //按需导入 export default { // ... methods: { // ... async login(){ let userName = this.userName; let password = this.password; if (!userName||!password){ this.$Message.error("信息需填写完整") } else await login({userName,password}); } }, // ... }