Vue-axios请求拦截器及请求封装

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

拦截器

axios提供了拦截器方法，可以在请求的生命过程中进行干预控制

• 请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

比如经常需要在请求前，加入类似JWT等的头部字段，免去在每次请求时添加的繁琐，可以这样

axios.interceptors.request.use(config => {
  let token = localStorage.getItem('token'); // token 存储地址
  console.log(token)
  if (token) {
    config.headers.common['Authorization'] = "JWT " + token // 头部设置
  }
  return config;
}, error => {
  console.log(error)
  return Promise.reject(error);
});

• 响应拦截器

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

比如在响应状态码为401时，这很明显是缺乏了认证缓解，那么可以重定向页面至认证页面，比如login

axios.interceptors.response.use(response => {
  return response;
}, error => {
  console.log(error.request.response)
  if (error.request.status == 401) {
    window.location.href = "/login"
  }
  return error
});

请求封装

为了更好的管理项目代码，构建合理的结构框架，我们常常需要对请求进行封装，在组件处不会大规模的编写axios.get...axios.post..

首先可以在项目目录下定义http目录，在其中封装基本的axios请求

// ./http/request.js
const axios = require('axios')

axios.defaults.baseURL = 'http://127.0.0.1:8000' // 请求的接口主域名
axios.defaults.timeout = 10000 // 请求超时的设置 10s

如果有必要，可以参考上节对请求进行拦截

接下来封装基本的请求函数

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} headers [请求时的头部]
 **/
export function get(url, params, headers) {
  return new Promise((resolve, reject) => {
    axios.get(url, {params, headers}).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

如果某些组件页面需要请求数据，那么可以额外定义api文件，用以封装请求

// ./http/api.js
import {get, post, put, del} from './index'

/**
 * 注册接口
 * @parameter: {username:username, phone:phone} [object]
 */
export const signUp = parameter => {
  return post(
    'signup/',
    parameter,
  )
}

在需要使用的组件处，导入使用即可，记得是在组件的script中

// views/Sigin.vue
import { signUp } from '@/http/api'
methods:{
    signup(){
        signUp({
            account: this.account
            ...
        }).then(res=>{
            ...
        })
    }
}