axios请求大全

大家好，欢迎来到IT知识分享网。

本文讲解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: '' } // 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: '' } // 转成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) } }