北京市西城区住房建设局官方网站,企业邮箱账号是什么,网站底部友情链接代码,惠州网站建设推广公司文章目录 一、axios简介基本使用 二、封装axios的原因三、封装axios的方法1. 设置接口请求前缀2. 设置请求头和超时时间3. 封装请求方法4. 添加请求拦截器5. 添加响应拦截器小结 一、axios简介
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端#xff0c;适用于浏览器和… 文章目录 一、axios简介基本使用 二、封装axios的原因三、封装axios的方法1. 设置接口请求前缀2. 设置请求头和超时时间3. 封装请求方法4. 添加请求拦截器5. 添加响应拦截器小结 一、axios简介
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端适用于浏览器和Node.js环境。它提供以下特性
创建XMLHttpRequests和HTTP请求支持 Promise API请求和响应拦截数据转换取消请求自动转换JSON数据客户端XSRF防御 Vue 2.0起官方推荐使用 axios 替代 vue-resource。
基本使用
安装 axios
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: {type: ,page: 1}
}).then(res {console.log(res);
});并发请求
axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (res1, res2) {// 处理响应}));二、封装axios的原因
虽然 axios 的API设计友好但随着项目规模增长直接使用 axios 可能会导致以下问题
重复编写配置代码如超时时间、请求头等。难以维护的冗余代码。缺乏统一的错误处理。 因此封装 axios 可以提高代码质量和可维护性。
三、封装axios的方法
1. 设置接口请求前缀
根据不同环境开发、测试、生产设置不同的请求前缀
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: {proxy: {/proxyApi: {target: http://dev.xxx.com,changeOrigin: true,pathRewrite: {^/proxyApi: }}}
}2. 设置请求头和超时时间
创建 axios 实例时配置通用请求头和超时时间
const service axios.create({timeout: 30000,headers: {Content-Type: application/json;charsetutf-8}
});3. 封装请求方法
封装 GET 和 POST 请求方法便于统一管理和使用
export function httpGet({ url, params {} }) {return new Promise((resolve, reject) {axios.get(url, { params }).then(res resolve(res.data)).catch(err reject(err));});
}
export function httpPost({ url, data {}, params {} }) {return new Promise((resolve, reject) {axios({ url, method: post, data, params }).then(res resolve(res.data)).catch(err reject(err));});
}将封装的方法放在 api.js 文件中便于统一管理
import { httpGet, httpPost } from ./http;
export const getorglist (params {}) httpGet({ url: apps/api/org/list, params });在页面中直接调用
import { getorglist } from /assets/js/api;
getorglist({ id: 200 }).then(res {console.log(res);
});4. 添加请求拦截器
在请求拦截器中添加通用逻辑如设置token
axios.interceptors.request.use(config {const token localStorage.getItem(token);token (config.headers.Authorization token);return config;
}, error Promise.reject(error));5. 添加响应拦截器
在响应拦截器中处理通用错误和业务逻辑
axios.interceptors.response.use(response {if (response.status 200) {// 根据状态码处理业务逻辑return Promise.resolve(response.data);} else {return Promise.reject(response);}
}, error {// 处理错误return Promise.reject(error);
});小结
封装 axios 是提升项目代码质量的重要手段。合理的封装不仅能减少重复代码还能提高代码的可维护性和可读性。封装方案应根据项目需求灵活设计。
