axios请求封装

1. 首先在vue项目下安装axios以及支持异步提示的iView组件库

   npm install axios

   npm install iview

2. 在src文件夹下新建axios文件夹，在其中新建api.js用于存放接口，request.js用于封装axios对象

1. 编写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中只需要关注业务就行。

2. 编写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. 在页面中使用

   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}); } }, // ... }