记录一下axios封装

src目录下创建api/axios.js

axios.js代码如下：

/*
 * @Author: 471826078@qq.com
 * @Date: 2020-05-21 09:54:50
 * @LastEditors: 471826078@qq.com
 * @LastEditTime: 2020-05-27 16:18:41
 */
import axios from 'axios'
//引入vue
import Vue from 'vue';
//新创建一个vue实例
let v = new Vue();
import router from '../router'

axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

请求拦截

axios.interceptors.request.use(
        config => {
            const token = window.localStorage.getItem('blogToken')
            token && (config.headers.Authorization = token);
            return config
        },
        error => {
            return Promise.error(error)
        }
    )

响应拦截

axios.interceptors.response.use(
 response => {
     if (response.status === 200) {
         return Promise.resolve(response)
     } else {
         return Promise.reject(response)
     }
 },
 error => {
     if (error.response.status) {
         switch (error.response.status) {
             case 401:
                 router.replace({
                     path: '/login',
                     query: { redirect: router.currentRoute.fullPath }
                 })
                 v.$message({
                     type: 'warning',
                     message: error.response.data
                 })
                 break;
             case 403:
                 v.$message({
                     type: 'warning',
                     message: 'token已过期，请重新登录'
                 })
                 localStorage.removeItem('blogToken');
                 // store.commit('loginSuccess', null);
                 // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                 setTimeout(() => {
                     router.replace({
                         path: '/login',
                         query: {
                             redirect: router.currentRoute.fullPath
                         }
                     });
                 }, 2000);
                 break;
             case 404:
                 v.$message({
                     type: 'warning',
                     message: '网络请求不存在'
                 })
                 break;
             case 500:
                 v.$message({
                     type: 'warning',
                     message: '服务器异常，请联系管理员'
                 })
                 break;
                 // 其他错误，直接抛出错误提示
             default:
                 v.$message({
                     type: 'warning',
                     message: error.response.data
                 })
         }
         return Promise.reject(error.response);
     }
 }
)

封装get请求

/**
 * @name: 封装get请求
 * @param { String } url
 * @param { Object } params 
 * @Author: 471826078@qq.com
 */

export const get = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.get(url, { params }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

封装post 请求

/** 
 * @name: 封装post请求
 * @param {String} url
 * @param { Object } params 
 * @Author: 471826078@qq.com
 */

export const post = (url, params) => {
    return new Promise((resolve, reject) => {
        axios.post(url, params).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}

使用 axios.js

创建 api/login.js

/**
 * @name: 登录api配置
 * @param {type} 
 * @Author: 471826078@qq.com
 */

import { post } from './axios'

export const apiRegister = p => post('api/users/register', p)
export const apiLogin = p => post('api/users/adminLogin', p)

.vue文件中使用暴露出的接口方法

src/view/Login.vue

<template>
</template>
<script>
//按需引入需要用到的接口
import { apiLogin } from "@/api/login";
export default {
  name: "Login",
  data() {
    return {
      form: {
        phone: "",
        password: ""
      }
    }
  },
  methods: {
    submit() {
          const { phone, password } = this.form;
          apiLogin({ phone, password }).then(res => {
            if (res.isSuccess) {
              window.localStorage.setItem("blogToken", res.token);
              this.$message({
                type: "success",
                message: res.message
              });
              setTimeout(() => {
                this.$message("submit!");
                this.$router.replace("Home");
              }, 1000);
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
    }
  }
};
</script>