axios请求封装

最新推荐文章于 2022-08-03 09:00:00 发布

原创最新推荐文章于 2022-08-03 09:00:00 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

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

npm install axios

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

avatar

编写request.js

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

import service from './request'

export const login = data => {
  return service({
    url: '/user/login',
    method: 'post',
    data: JSON.stringify(data)
  })
}

//..others

在页面中使用

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