无锡微网站开发seo少女
本文将基于 Axios 原理，安装及封装方面展开描述，话不多说，现在发车！
一、原理
Axios 中文文档：起步 | Axios中文文档 | Axios中文网
赛前科普：
下文将涉及到三个关键词：Axios，Ajax，XMLHttpRequest
XMLHttpRequest（XHR）
- 浏览器内置的一个 API，用于在客户端与服务器交换数据
- 可以实现异步请求
- 支持多种数据格式（如 JSON、文本等）
Ajax
- 通过异步请求，在不重新加载整个页面的情况下，动态更新页面的部分内容
- 支持多种数据格式（如 JSON、文本等）
- AJAX 通过
XMLHttpRequest技术来实现
Axios 是一个基于 Promise 的 网络请求库，用于在浏览器和 Node.js 环境中发送 HTTP 请求
- 浏览器端中，较为传统的两种网络请求的 API 是 fetch 和 XMLHttpRequest，而 Axios 使用的是 XMLHttpRequest
- Node.js 环境中，Axios使用 Node.js 原生的 http 或 https 模块
Axios 使用 Promise 来处理异步请求，使得它可以通过 .then() 和 .catch() 来处理请求成功或失败的回调，而不需要使用传统的回调函数。
二、安装
执行如下命令：
npm install axios或者
yarn add axios安装完成后即可进行封装
三、封装
首先创建一个 request 目录，创建 request.js 文件用于封装方法，创建一个使用 axios 实例的 admin.js 文件。
request.js 文件
在这个文件中创建 axios 实例，设置 baseURL，timeout 等。
接下来就请求拦截器和相应拦截器，根据实际业务需求：
是否需要在请求拦截器中携带登录令牌，在响应拦截器中根据返回的状态码进行错误处理或者数据接收。
（状态码的处理可以单独封装一个方法，不必将判断大篇幅写在响应拦截器中，下面有代码示例）
import axios from 'axios'// create an axios instance
const service = axios.create({// baseURL: process.env.VUE_APP_BASE_API,// withCredentials: true,timeout: 5000 // request timeout
})// Add a request interceptor
service.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)// Add a response interceptor
service.interceptors.response.use(response => {const res = response.dataif (res.code !== 200) {console.error(res.message || 'Error')handleError(res.code) // TODO: Handle errorreturn Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {return Promise.reject(error)}
)export default servicehandleError(code) => {// 利用 if，switch等对code进行条件判断进行对应处理switch (code) {case '500401':console.log('这是500401');break;case '500402':console.log('这是500402');break;case '500403':console.log('这是500403');break;default:console.log('default');}
}
import axios from 'axios'const service = axios.create(config) service.interceptors.request.use(requestHandler, requestErrorHandler) service.interceptors.response.use(responseHandler, responseErrorHandler)export default service封装结构就是这样的，创建实例——请求、响应拦截器——暴露方法
三、使用
admin.js 文件
在这个文件中使用封装后的方法：
import request from '@/utils/request'export function fetchList(query) {return request({url: 'your/request/url',method: 'get',params: query})
}export function finishForm(formData) {return request({url: 'your/request/url11',method: 'post',data: formData})
}