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:  // 請求逾時時間
})
// 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 === ) {
      Toast.message({
        color:'rgba(0,0,0,.55)',
        message: error.response.data.err_msg,
        close: false
      })
    }
    if (error.response.status === ) {
      Toast.message({
        close: false,
        message: '請求異常，請稍後再試～',
        color:'rgba(0,0,0,.55)'
      })
    }
// 重點代碼：當伺服器傳回狀态碼時，使用refresh重新整理接口更新已有token，再重複上一個接口請求，若失敗，登出
    if (error.response.status === ) {
      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的使用就是這個樣子的啦～