网站建设的公司哪家强,网站开发语言有什么,如何做企业网站步骤,文化传媒有限公司 网站建设文章底部有个人公众号#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享#xff1f; 踩过的坑没必要让别人在再踩#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官#xff1a;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 srchttps://unpkg.com/axios/dist/axios.min.js/script导入
import axios from axios发送请求
axios({ url:xxx, // 设置请求的地址method:GET, // 设置请求方法params:{ // get请求使用params进行参数凭借,如果是post请求用datatype: ,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;charsetutf-8// 在开发中一般还需要单点登录或者其他功能的通用请求头可以一并配置进来},post: {Content-Type: application/json;charsetutf-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/apigetorglist({ 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 没有一个绝对的标准只要你的封装可以满足你的项目需求并且用起来方便那就是一个好的封装方案
