本文讲解axios封装方式以及针对各种后台接口的请求方式
axios的介绍和基础配置可以看这个文档: 起步 | Axios中文文档 | Axios中文网
axios的封装
axios封装的重点有三个，一是设置全局config,比如请求的基础路径，超时时间等，第二点是在每次请求前往请求头里面塞token,第三点是处理请求的response,如果出错了进行统一的错误处理
//进行axios二次封装:使用请求与响应拦截器
import axios from 'axios'
//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
const request = axios.create({
//基础路径
baseURL: 'http://localhost:6689', //基础路径
timeout: 15000, //超时的时间的设置
})
//第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
//config配置对象,headers属性请求头,经常给服务器端携带公共参数
config.headers.Authorization = 'authorization'
//返回配置对象
return config
})
//第三步:响应拦截器
request.interceptors.response.use(
(response) => {
if (response.headers['content-type'] !== 'application/json') {
// 返回的不是json则由调用方处理
return response
}
if (response.data.status == 200) {
// 请求成功
return response.data
} else if (response.data.status == 401) {
// 未登录
// todo 重新登录
return Promise.reject(response.data)
} else {
// 弹出错误提示
console.error(response.data.message)
return Promise.reject(response.data)
}
},
(error) => {
//失败回调:处理http网络错误的
//定义一个变量:存储网络错误信息
let message = ''
if (error.message.includes('timeout')) {
message = '请求接口服务超时'
} else if (error.message.includes('Network Error')) {
message = '网络错误'
}
//http状态码
if (error.response) {
const status = error.response.status
switch (status) {
case 401:
message = 'TOKEN过期'
break
case 403:
message = '无权访问'
break
case 404:
message = '请求地址错误'
break
case 500:
message = '服务器出现问题'
break
default:
message = '网络出现问题'
break
}
}
if (!message) message = '未知错误'
//提示错误信息
console.log(message)
return Promise.reject(error)
},
)
//对外暴露
export default request
发送GET请求
我们先来看swagger文档,这个请求是get请求，传递的参数是query,也就是跟在url后面的键值对，类似于?key1=val1&key2=val2这种
实现代码如下,request.js就是上面封装的axios,下面就不重复说了,发送get请求重点是两个，一个是method:get,一个是用params来传递参数
import request from "@/utils/request.js";
async function doGet() {
const params = {
id: 1,
name: '研发部'
}
// 使用params传递query参数
const res = await request({
url: '/axios/listAll',
method: 'get',
params //等同于params:params
})
console.log(res)
}我们来看下network里面的数据，发送params参数会把请求参数拼接到url后面，如果是中文字符，则进行url编码
发送POST请求，数据类型为json
看下接口文档,method为post,数据类型为json
post传递json需要把传递的数据放入请求体(request body)里面，并且把content-type设置成application/json,所幸axios使用起来很简单，只需要把method设置成post,使用data参数传递就行了
async function doPostJson() {
const data = {
id: 1,
name: '研发部'
}
// json使用data参数传递
const res = await request({
url: '/axios/add',
method: 'post',
data //等同于data:data
})
console.log(res)
}下图是network中发送的请求头
发送的请求体
发送POST请求，数据类型为form
post请求，数据类型为form也挺常见的
方式一，通过query传参，不推荐
第一种方式通过query传参，就是参数跟在url后面，这种方式有两个问题，一是url长度有限制，chrome是8千个字符，post请求一般传递的数据都比较大，二是参数跟在url后面很容易被识别，有一定的安全风险,代码如下:
async function doPostQuery() {
const params = {
username: 'admin',
password: '123456'
}
// form可以使用params来传参
const res = await request({
url: '/axios/login',
method: 'post',
params //等同于params:params
})
console.log(res)
}
方式二，通过form传参，推荐
第二种方式是把请求数据放入request body中，可以解决上面两个问题
这种方式需要使用qs库,先安装qs,然后使用data传参，区别就是数据要先通过qs.stringify转换成form
npm install qsimport qs from 'qs'
async function doPostForm() {
const data = {
username: 'admin',
password: '123456'
}
// 转成form后传参
const res = await request({
url: '/axios/login',
method: 'post',
data: qs.stringify(data)
})
console.log(res)
}
发送PUT请求，数据类型为json
发送put请求跟post是一样的，都是通过data来传递参数，唯一的区别是method改成put就行了
async function doPutJson() {
const data = {
id: 1,
name: '研发部'
}
// json使用data参数传递
const res = await request({
url: '/axios/update',
method: 'put',
data //等同于data:data
})
console.log(res)
} 
发送PUT请求，数据类型为form
这个可以参考发送post请求，数据类型为form那段，只要method改成put,其他都一样
发送DELETE请求，数据类型为path
delete请求是用来做删除的，一般会把id放在请求路径中
async function doDeletePath() {
const id = 1
// 参数直接拼接在路径后面
const res = await request({
url: '/axios/delete/' + id,
method: 'delete',
})
console.log(res)
} 
发送DELETE请求，数据类型为form
可以通过query的方式传递参数
async function doDeleteForm() {
const params = {
ids: [1,2,3].join(',')
}
// 参数直接拼接在路径后面
const res = await request({
url: '/axios/batchDelete',
method: 'delete',
params
})
console.log(res)
} 
发送DELETE请求，数据类型为json
method为delete,使用data传递数据
async function doDeleteJson() {
const data = {
ids: [1,2,3]
}
// 参数直接拼接在路径后面
const res = await request({
url: '/axios/batchDeleteJson',
method: 'delete',
data
})
console.log(res)
}上传文件
axios上传文件的要点是要用FormData对象来组装数据，请求头的Content-Type要设置成multipart/form-data,使用data传递数据表示数据放在request body里面
async function doUpload() {
const formData = new FormData();
// 把input file里面的文件放入formData,如果后台要求数组，可以多次调用append
formData.append("file", fileRef.value.files[0])
// 放入其他数据
formData.append("id", 1)
formData.append("name", "研发部")
// 参数直接拼接在路径后面
const res = await request({
url: '/axios/uploadFile',
method: 'post',
data: formData
})
console.log(res)
}
下载文件
方式一,window.location.href
如果需要下载的是一个url,则只需要window.location.href=url就行了，但是这种方式有几个问题，一是如果url里面是图片，txt等浏览器可以打开的内容，则会直接打开，不会下载，二是这种方式只支持get请求，如果需要通过post等形式下载则不适用，三是这种方式没法在header里面加token,四是这种方式没法指定文件名，后台指定什么文件名就是什么
方式二,axios下载
axios的下载方式就灵活很多，可以解决上面提到的那些问题，把请求的responseType指定成blob,然后从返回的头字段中解析中文件名，最后通过新建一个看不见的a标签来实现下载
async function doDownload() {
// 参数直接拼接在路径后面
const res = await request({
url: '/axios/downloadFile',
method: 'post',
responseType: 'blob' // 重要：指定响应类型为blob
})
downloadFile(res.data, getAttachmentName(res.headers))
}
function getAttachmentName(headers) {
let fileName = headers['content-disposition']?.match(/filename=(.*)/)[1]
if (fileName) {
fileName = decodeURI(fileName)
} else {
//此处表示后台没有设置响应头 content-disposition,请根据业务场景自行处理
fileName = "download"
}
return fileName
}
function downloadFile(file, fileName) {
//转成blob对象
const blob = new Blob([file], { type: 'application/octet-stream' })
if (typeof window.navigator.msSaveBlob !== 'undefined') {
window.navigator.msSaveBlob(blob, fileName)
} else {
// 创建a标签去下载
const blobURL = window.URL.createObjectURL(blob)
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download', fileName)
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink)
tempLink.click()
document.body.removeChild(tempLink)
window.URL.revokeObjectURL(blobURL)
}
}
