面试官：Vue项目中有封装过axios吗？主要是封装哪方面的？

Vue项目中有封装过axios吗？主要是封装哪方面的？

一、axios是什么

axios 是一个轻量的 HTTP客户端

基于 XMLHttpRequest 服务来履行 HTTP 恳求，支撑丰富的装备，支撑 Promise，支撑浏览器端和 Node.js 端。自Vue2.0起，尤大宣布撤销对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http恳求
  • 支撑 Promise API
  • 拦截恳求和呼应
  • 转化恳求数据和呼应数据
  • 撤销恳求
  • 主动转化JSON 数据
  • 客户端支撑防御XSRF

根本运用

装置

// 项目中装置
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入


import axios from 'axios'

发送恳求


axios({    
 url:'xxx',  // 设置恳求的地址
 method:"GET", // 设置恳求办法
 params:{   // get恳求运用params进行参数凭借,假如是post恳求用data
  type: '',
  page: 1
  }
}).then(res => { 
 // res为后端返回的数据
 console.log(res);  
})

并发恳求axios.all([])

function getUserAccount() {
  return axios.get('/user/12345');
}
​
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
​
axios.all([getUserAccount(), getUserPermissions()])
   .then(axios.spread(function (res1, res2) { 
  // res1第一个恳求的返回的内容，res2第二个恳求返回的内容
  // 两个恳求都履行完结才会履行
}));

二、为什么要封装

axios 的 API 很友爱，你完全能够很轻松地在项目中直接运用。

不过随着项目规模增大，假如每建议一次HTTP恳求，就要把这些比如设置超时时刻、设置恳求头、依据项目环境判别运用哪个恳求地址、过错处理等等操作，都需求写一遍

这种重复劳动不只浪费时刻，并且让代码变得冗余不堪，难以保护。为了进步咱们的代码质量，咱们应该在项目中二次封装一下 axios 再运用

举个例子：


axios('http://localhost:3000/data', {
 // 装备代码
 method: 'GET',
 timeout: 1000,
 withCredentials: true,
 headers: {
  'Content-Type': 'application/json',
  Authorization: 'xxx',
  },
 transformRequest: [function (data, headers) {
  return data;
  }],
 // 其他恳求装备...
})
.then((data) => {
 // todo: 真正事务逻辑代码
 console.log(data);
}, (err) => {
 // 过错处理代码 
 if (err.response.status === 401) {
 // handle authorization error
  }
 if (err.response.status === 403) {
 // handle server forbidden error
  }
 // 其他过错处理.....
 console.log(err);
});

假如每个页面都发送相似的恳求，都要写一堆的装备与过错处理，就显得过于繁琐了

这时分咱们就需求对axios进行二次封装，让运用更为便利

三、怎么封装

封装的同时，你需求和 后端协商好一些约定，恳求头，状况码，恳求超时时刻…….

设置接口恳求前缀：依据开发、测验、生产环境的不同，前缀需求加以区分

恳求头 : 来完结一些具体的事务，有必要带着一些参数才能够恳求(例如：会员事务)

状况码: 依据接口返回的不同status ， 来履行不同的事务，这块需求和后端约定好

恳求办法：依据get、post等办法进行一个再次封装，运用起来更为便利

恳求拦截器: 依据恳求的恳求头设定，来决议哪些恳求能够拜访

呼应拦截器： 这块就是依据 后端`返回来的状况码断定履行不同事务

设置接口恳求前缀

使用node环境变量来作判别，用来区分开发、测验、生产环境


if (process.env.NODE_ENV === 'development') {
 axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (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'
     // 在开发中，一般还需求单点登录或许其他功能的通用恳求头，能够同时装备进来
     }
  },
})

封装恳求办法

先引入封装好的办法，在要调用的接口从头封装成一个办法暴露出去


// get 恳求
export function httpGet({
 url,
 params = {}
}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params
   }).then((res) => {
   resolve(res.data)
   }).catch(err => {
   reject(err)
   })
  })
}
​
// post
// post恳求
export function httpPost({
 url,
 data = {},
 params = {}
}) {
 return new Promise((resolve, reject) => {
  axios({
   url,
   method: 'post',
   transformRequest: [function (data) {
    let ret = ''
    for (let it in data) {
     ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
     }
    return ret
    }],
   // 发送的数据
   data,
   // •url参数
   params
​
   }).then(res => {
   resolve(res.data)
   })
  })
}

把封装的办法放在一个api.js文件中


import { httpGet, httpPost } from './http'
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params })

页面中就能直接调用


// .vue
import { getorglist } from '@/assets/js/api'
​
getorglist({ id: 200 }).then(res => {
 console.log(res)
})

这样能够把api一致管理起来，今后保护修正只需求在api.js文件操作即可

恳求拦截器

恳求拦截器能够在每个恳求里加上token，做了一致处理后保护起来也便利


// 恳求拦截器
axios.interceptors.request.use(
 config => {
  // 每次发送恳求之前判别是否存在token
  // 假如存在，则一致在http恳求的header都加上token，这样后台依据token判别你的登录状况，此处token一般是用户完结登录后储存到localstorage里的
  token && (config.headers.Authorization = token)
  return config
  },
 error => {
  return Promise.error(error)
  })

呼应拦截器

呼应拦截器能够在接收到呼应后先做一层操作，如依据状况码判别登录状况、授权


// 呼应拦截器
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封装，就能够让咱们能够领略到它的魅力
  • 封装 axios 没有一个肯定的标准，只需你的封装能够满足你的项目需求，并且用起来便利，那就是一个好的封装计划

参考文献

  • www.html.cn/qa/vue-js/2…
  • /post/684490…
  • /post/684490…