行业门户网站运营方案广东省广州市番禺区

本文讲解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.statusswitch (status) {case 401:message = 'TOKEN过期'breakcase 403:message = '无权访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器出现问题'breakdefault: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 qs

import 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,如果后台要求数组，可以多次调用appendformData.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 = blobURLtempLink.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)}
}