封装Axios思路及代码

axios 定义

Axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。

axios提供两个http请求适配器，XHR和HTTP，XHR的核心是浏览器端的XMLHttpRequest对象，HTTP的核心是node的http.request方法

axios有那些特性

• 浏览器中创建XMLHttpRequests
• node.js创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

Axios.prototype上挂载9个方法

• axios.request(config)
• axios.get(url[,config])
• axios.delete(url[,config])
• axios.head(url[,config])
• axios.options(url[,config])
• axios.post(url[,data[,config]])
• axios.put(url[,data[,config]])
• axios.patch(url[,data[,config]])

为啥要封装axios

随着项目规模的增大，每次发送请求，都需要设置超时时间、设置请求头、状态码的拦截、token是否携带、根据项目环境判断使用哪个请求，错误处理等等，重复的劳动浪费时间，还会让代码变得冗余，难以维护。

如何封装

• 设置接口请求前缀：根据开发、测试、生产环境不同，前缀需要加以区分 利用node环境变量判断，区分开发、测试、生产

if(process.env.NODE_ENV === 'development'){
   axios.defaults.baseURL = 'http://dev.xxx.com'
}else if(process.env.NODE_TEST === 'test'){
   axios.defaults.baseURL = 'http://test.xxx.com'
}else (process.env.NODE_ENV === 'production'){
   axios.defaults.baseURL = 'http://prod.xxx.com'
}

本地调试时，还需要在vue.config.js 文件中配置devServer实现代理，解决跨域问题

devServer:{
   proxy:{
      '/proxyApi':{ // 代理地址
        target:'http://dev.xxx.com', // 需要代理的地址
        changeOrigin:true,  // 是否跨域
        pathRewrite:{
            '/proxyApi':'' // 本身的接口地址没有
        }
      }
   }
}

• 请求头：实现一些具体的业务，必须携带一些参数才可以请求

const service = axios.create({


   ...
   timeout:30000,// 请求30S超时
   headers:{
      get:{
         'Content-Type':'application/x-www-form-                                           urlencoded;charset=utf-8'
      },
      post:{
          'Content-Type':'application/json;charset=utf-8'
      }
   }
})

• 状态码：根据接口返回的不同status，执行不同的业务
• 请求方法：根据get、post等方法进行再次封装，使用起来更为方便
• 请求拦截器：根据请求的请求头设定，决定哪些请求可以访问

// 导入vuex,获取文件中的状态对象token
import store from '@/store/index'

axios.interceptors.request.use(
   config=>{
   // 每次发送请求之前判断是否存在token
   // 如果存在，则统一在http请求的header都加上token，后台根据token判断是否登录情况
   // 即使本地存在token，有可能token会过期，所以在响应拦截器中要对返回状态进行判断
   const token = store.state.token
   token && (config.headers.Authorization = token)
   return config
   },
   error =>{
      return Promise.error(error)
   }
)

总结：登录完成后，将用户的token通过localstorage或者cookie存在本地，然后用户每次在进入页面的时候，会首先从办呢滴存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中token状态。

• 响应拦截器：根据返回的状态码判定执行不同业务

axios.interceptors.response.use(
   response =>{
      //如果返回的状态码是200，可以正常拿到数据
      // 否则抛出错误
      if(response.status === 200){
         if(response.data.code === 511){
           // 未授权调取授权接口
         }else if(response.data.code === 510){
           // 未登录跳转登录页
         }else {
           return Promise.resolve(response)
         }
      }else {
        return Promise.reject(response)
      }
   },
   error =>{
    if(error.response.status){
       return Promise.reject(error.response)
    }
   }
)

完整封装Axios的代码

// auth.js
const TOKEN_KEY = '__TOKEN'; 
export function getTokenAUTH() { 
   return localStorage.getItem(TOKEN_KEY); 
}

// axios.js
import axios from 'axios'
import { ElLoading, ElMessage } from 'element-plus'
import { getTokenAUTH } from '@/utils/auth.js'

const pendingMap = new Map()

const LoadingInstance = {
  _target: null,
  _count: 0,
}

function myAxios(axiosConfig, customOptions, loadingOptions) {
  const service = axios.create({
    baseURL: 'http://localhost:8888', // 设置统一的请求前缀
    timeout: 10000, // 设置统一的超时时长
  })

  // 自定义配置
  let custom_options = Object.assign(
    {
      repeat_request_cancel: true, // 是否开启取消重复请求, 默认为 true
      loading: false, // 是否开启loading层效果, 默认为false
      reduct_data_format: true, // 是否开启简洁的数据结构响应, 默认为true
      error_message_show: true, // 是否开启接口错误信息展示,默认为true
      code_message_show: false, // 是否开启code不为0时的信息提示, 默认为false
    },
    customOptions
  )

  // 请求拦截
  service.interceptors.request.use(
    (config) => {
      removePending(config)
      custom_options.repeat_request_cancel && addPending(config)
      // 创建loading实例
      if (custom_options.loading) {
        LoadingInstance._count++
        if (LoadingInstance._count === 1) {
          LoadingInstance._target = ElLoading.service(loadingOptions)
        }
      }
      // 自动携带token
      if (getTokenAUTH() && typeof window !== 'undefined') {
        config.headers.Authorization = getTokenAUTH()
      }

      return config
    },
    (error) => {
      return Promise.reject(error)
    }
  )

  // 响应拦截
  service.interceptors.response.use(
    (response) => {
      removePending(response.config)
      custom_options.loading && closeLoading(custom_options) // 关闭loading

      if (
        custom_options.code_message_show &&
        response.data &&
        response.data.code !== 0
      ) {
        ElMessage({
          type: 'error',
          message: response.data.message,
        })
        return Promise.reject(response.data) // code不等于0, 页面具体逻辑就不执行了
      }

      return custom_options.reduct_data_format ? response.data : response
    },
    (error) => {
      error.config && removePending(error.config)
      custom_options.loading && closeLoading(custom_options) // 关闭loading
      custom_options.error_message_show && httpErrorStatusHandle(error) // 处理错误状态码
      return Promise.reject(error) // 错误继续返回给到具体页面
    }
  )

  return service(axiosConfig)
}

export default myAxios

/**
 * 处理异常
 * @param {*} error
 */
function httpErrorStatusHandle(error) {
  // 处理被取消的请求
  if (axios.isCancel(error))
    return console.error('请求的重复请求：' + error.message)
  let message = ''
  if (error && error.response) {
    switch (error.response.status) {
      case 302:
        message = '接口重定向了！'
        break
      case 400:
        message = '参数不正确！'
        break
      case 401:
        message = '您未登录，或者登录已经超时，请先登录！'
        break
      case 403:
        message = '您没有权限操作！'
        break
      case 404:
        message = `请求地址出错: ${error.response.config.url}`
        break // 在正确域名下
      case 408:
        message = '请求超时！'
        break
      case 409:
        message = '系统已存在相同数据！'
        break
      case 500:
        message = '服务器内部错误！'
        break
      case 501:
        message = '服务未实现！'
        break
      case 502:
        message = '网关错误！'
        break
      case 503:
        message = '服务不可用！'
        break
      case 504:
        message = '服务暂时无法访问，请稍后再试！'
        break
      case 505:
        message = 'HTTP版本不受支持！'
        break
      default:
        message = '异常问题，请联系管理员！'
        break
    }
  }
  if (error.message.includes('timeout')) message = '网络请求超时！'
  if (error.message.includes('Network'))
    message = window.navigator.onLine ? '服务端异常！' : '您断网了！'

  ElMessage({
    type: 'error',
    message,
  })
}

/**
 * 关闭Loading层实例
 * @param {*} _options
 */
function closeLoading(_options) {
  if (_options.loading && LoadingInstance._count > 0) LoadingInstance._count--
  if (LoadingInstance._count === 0) {
    LoadingInstance._target.close()
    LoadingInstance._target = null
  }
}

/**
 * 储存每个请求的唯一cancel回调, 以此为标识
 * @param {*} config
 */
function addPending(config) {
  const pendingKey = getPendingKey(config)
  config.cancelToken =
    config.cancelToken ||
    new axios.CancelToken((cancel) => {
      if (!pendingMap.has(pendingKey)) {
        pendingMap.set(pendingKey, cancel)
      }
    })
}

/**
 * 删除重复的请求
 * @param {*} config
 */
function removePending(config) {
  const pendingKey = getPendingKey(config)
  if (pendingMap.has(pendingKey)) {
    const cancelToken = pendingMap.get(pendingKey)
    cancelToken(pendingKey)
    pendingMap.delete(pendingKey)
  }
}

/**
 * 生成唯一的每个请求的唯一key
 * @param {*} config
 * @returns
 */
function getPendingKey(config) {
  let { url, method, params, data } = config
  if (typeof data === 'string') data = JSON.parse(data) // response里面返回的config.data是个字符串对象
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&')
}

如何使用axios.js

下面我们来 goods.js 中编写获取商品列表的API。

import myAxios from './axios'

export funtion getListAPI(paramsList){
  return myAxios({
     url:'/api/list',
     method:'get',
  })
}

export function getListAPI(paramsList){
   return myAxios({
      url:'/api/list',
      method:'post',
      data:paramsList
   })
}
// 有时后端要求content-Type必须为application/x-wwww-from-urlencoded形式，前端就需要对参数数据进行序列化处理,通过第三方依赖解决（qs）

npm install qs

import qs from 'qs'

export function getListAPI(paramsList){
   return myAxios({
      url:'/api/list',
      method:'post',
      data:paramsList,
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      transformRequest: [ (data) => { return qs.stringify(data) } ],
   })
}