本文讲解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 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,如果后台要求数组，可以多次调用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)
  }
}