开启掘金第一篇 axios的封装

简介：逛掘金已经有一段时间了，终于下定决心写文，本人程序媛一枚，初来乍到，有不对的地方还请各位看官指点，今天就项目中的有关axios的封装简单介绍一下

一、安装axios

npm i axios

二、引入

通常我会在项目的src目录下创建一个axios/http.js文件，用于封装axios

http.js

import Message from 'element-ui' //后面的错误处理中会用到message的错误提示
import axios from 'axios'
import router from '../router/index' //后面的错误处理中涉及到路由的跳转

三、设置基路径

axios.defaults.baseURL = '去找你们后端要的基路径'

四、设置请求超时时间

axios.defaults.timeout = 10000

五、post请求头

axios.defaults.headers.post['Content-Type'] = 'application/json'

六、请求拦截处理

axios.interceptors.request.use(
  function (config) {
  //判断token是否存在 token存在 请求头才添加token 否则不添加
    if (sessionStorage.getItem('operation-token')) {
      config.headers.Authorization = 'Bearer' + sessionStorage.getItem('operation-token')
    }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

七、响应拦截处理

axios.interceptors.response.use(
  // 服务器状态码未200
  response => {
    console.log(response)
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是200的情况
  err => {
    console.log(err.response)

    const { httpCode, msg } = err.response.data
    switch (httpCode) {
      case 401:
        Message.error(msg)
        break
      case 403:
        Message.error(msg)
        router.push('/login')
        break
      case 404:
        Message.error(msg)
        router.push('/login')
        break
      default:
        break
    }
    return Promise.reject(err)
  }
)

响应拦截中我们针对token过期的情况做了进一步的处理，实时刷新token,避免用户在编辑过程中出现token失效导致编辑内容丢失的情况

// 用来处理刷新token后重新请求的自定义变量
axios.defaults.isRetryRequest = false
 case 401:
        Message.error(msg)
        if (err.response.data.errorCode === '0200102') {
          const config = err.config
          
          if (!config.isRetryRequest) {
            var instance = axios.create({
              baseURL: '基路径',
              timeout: 1000
            })
            return instance({
              url: '刷新的接口url',
              method: 'post',
              headers: {
                Authorization: ''
              },
              data: {
                refreshToken: sessionStorage.getItem('operation-refresh-token')
              }
            }).then(res => {
              console.log(res)
              //                       //修改flag
              config.isRetryRequest = true
              sessionStorage.setItem(
                'operation-token',
                res.data.oauth2AccessToken.access_token
              )
              config.headers.Authorization =
                'Bearer ' + res.data.oauth2AccessToken.access_token
              return axios(config)
            })
          }
        }
        break

这里由于后端的同学告诉我接口一旦塞了请求头token就会被检验（虽然明明这个接口是不需要token的），所以我只好重新创建了一个axios实例去调这个刷新token的接口

八、封装请求方法

get方法

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

post方法

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

put方法

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

delete方法

export function deleteMethod(url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'delete',
      url: url,
      data: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

以上便是本次关于axios封装的分享了

感谢观看，欢迎提各种宝贵意见

愿做追风人，从不等风来 ！ 诸君共勉！！