摘要
本文主要介绍了在Vue项目中封装axios的方法。axios是一个轻量级的HTTP客户端，它基于XMLHttpRequest服务执行HTTP请求。本文通过示例代码给你做了非常详细的介绍，对你的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
- 一、axiOS是什么？
- 特点
- 基本用途
- 二、为什么要打包？
- 第三，如何包装
- 设置接口请求前缀
- 设置请求头和超时
- 封装请求方法
- 请求拦截器
- 响应拦截器
- 总结
- 参考
一、axios是什么？
Axios是一个轻量级的Http客户端。
基于XMLHttpRequest服务执行HTTP请求，XMLHttpRequest服务支持丰富的配置、Promise、browser和node.js自从Vue2.0之后，犹大宣布取消vue-resource官方推荐，转而推荐axios。现在axios已经成为大多数Vue开发者的首选。
特点
- 从浏览器创建XMLHttpRequests
- 从node.js创建一个http请求
- 支持承诺api
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持国防XSRF。
基本用途
固定
// 项目中安装 npm install axios --S // cdn 引入 <script ></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进行两次打包，让它使用起来更加方便。
第三，如何包装
在封装的同时，你需要和后端协商一些约定，比如请求头，状态码，请求超时。.......
设置接口请求前缀:根据不同的开发、测试和生产环境，需要区分前缀。
请求头:要实现一些特定的服务，必须携带一些参数才能请求(比如成员服务)。
状态码:根据接口返回的不同状态执行不同的服务，需要和后端商定。
请求方法:按照get、post等方法重新打包比较方便。
请求拦截器:根据请求的请求头设置确定哪些请求可以被访问。
响应拦截器:这个模块根据后端返回的状态代码决定执行不同的服务。
