axios网络请求(axios封装、鉴权、拦截)

使用vue框架的小伙伴对于axios 肯定是不陌生的。 网上一搜，介绍一大堆，axios中文文档来自简书这里就不再讲他的原理阿用法之类了，直接上代码。

一、还是先安装

这里使用npm安装，需要其他安装方法的自行看文档：axios中文文档来自简书
npm install axios --save

二、直接使用 (request.js)

import axios from 'axios'  // 引入axios
import {refresh} from '@/api/user' // 封装好的refresh(鉴权需要刷新)接口
import Vue from 'vue'
import Toast  from 'muse-ui-toast' // 根据业务选择合适的ui库，我这里使用muse-ui的toast(消息框)组件
Vue.use(Toast)
// 创建axios实例
const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? '' : process.env.NODE_ENV === 'pre'? '' : 'http://127.0.0.1:8888',
  timeout: 15000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  let token = sessionStorage.getItem('access_token') // 我的用户权限token存储再sessionStorage中，可根据业务需要修改代码
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token // 让请求header携带access_token。可根据业务需要修改代码
  }
  return config
}, error => {
    Toast.message({
      close: false,
      message: '请求异常，请稍后再试～',
      color:'rgba(0,0,0,.55)'
    })
})

// respone拦截器，实现鉴权刷新
service.interceptors.response.use(
  response => response,
  error => {
    const config = error.config // 可以试着打印config看看具体是些什么
    // 这里我对多数的状态码进行了一个统一整理。
    if (error.response.status === 400) {
      Toast.message({
        color:'rgba(0,0,0,.55)',
        message: error.response.data.err_msg,
        close: false
      })
    }
    if (error.response.status === 500) {
      Toast.message({
        close: false,
        message: '请求异常，请稍后再试～',
        color:'rgba(0,0,0,.55)'
      })
    }
// 重点代码：当服务器返回401状态码时，使用refresh刷新接口更新已有token，再重复上一个接口请求，若失败，退出登录
    if (error.response.status === 401) {
      if (config.url != config.baseURL + '/refresh') { // 判断上一次请求是否是刷新请求。不判断的话，容易出现一直刷新的bug
        const retryreq = new Promise((resolve, reject) => { // 必须使用promise，否则不会被返回执行上一布操作
          // 使用refresh接口
          refresh({refresh_token: sessionStorage.getItem('refresh_token')}).then(res => {
            let data = res.data.data
            // 更新token
            sessionStorage.setItem('refresh_token', data.refresh_token) 
            sessionStorage.setItem('access_token', data.access_token)
            config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('access_token')
            config.baseURL = ''
            resolve(service(config)) // 必须resolve
          }).catch(error => {
            console.log(error)
          })
        })
        return retryreq;
      } else {
        // 如果刷新失败重新登录
        Toast.message({
          close: false,
          message: '登录失效，请重新登录',
          color:'rgba(0,0,0,.55)'
        })
        removeToken()
        sessionStorage.clear()
        location.reload()
      }
    }
    return Promise.reject(error);
  }
)
export default service

关于请求接口的封装

上面的代码中引入了一个 refresh
import {refresh} from '@/api/user' // 封装好的refresh(鉴权需要刷新)接口

在工作中，与后台交互必不可少，怎样使请求方式看着更加简介好看，需要对请求接口的api进行封装。
在上面的代码中，已经实现了对axios网络请求的封装了。我一般会在src目录下新建一个api文件夹，在里面分别创建请求对应的js文件：

方法一：

上代码:

import request from "@/utils/request"; // 引入已经封装好的js文件，我这里叫request，根据自己需要修改。
export function refresh (data) {
    return request({
        url: '/refresh', // 接口名称
        method: 'post',  // 接口方法
        data: data // 参数
    })
}

使用

import {refresh} from '@/api/user
refresh(参数).then(res => {
   //  do something
}).catch(err => {
    // do something
})

方法二：

上代码

import request from "@/utils/request"; 

const user = {
  refrsh: function (query) {
    return request({
      url: '/refrsh',
      method: 'get',
      params: query
    })
  },
  ....
}
export default user

使用

import user from '@/api/user
user.refresh(参数).then(res => {
   //  do something
}).catch(err => {
    // do something
})

以上代码只是es6的两种导出引入文件的使用，可根据业务的复杂程度选择合适的代码风格。注意引入方式{}的区别。axios的使用就是这个样子的啦～