Vue项目中有封装过axios吗？主要是封装哪方面的？

最新推荐文章于 2023-07-29 16:22:16 发布

殿君不是殿军

最新推荐文章于 2023-07-29 16:22:16 发布

阅读量152

点赞数

分类专栏： Vue JavaScript 前端面试大全文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43375584/article/details/125022658

版权

本文讨论了在Vue项目中封装axios的原因，包括减少重复代码、提高代码质量和维护性。介绍了如何封装axios，包括设置接口请求前缀、请求头、超时时间，以及封装请求方法、请求和响应拦截器。封装后的axios使得请求管理和错误处理更为便捷，同时提供了参考链接以供深入学习。

摘要由CSDN通过智能技术生成

面试官：Vue项目中有封装过axios吗？主要是封装哪方面的？

一、axios是什么

axios 是一个轻量的 HTTP客户端

基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御XSRF

基本使用

安装

// 项目中安装
npm install axios --S
// cdn 引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

导入

import axios from 'axios'

发送请求

axios({
           
  url:'xxx',    // 设置请求的地址
  method:"GET", // 设置请求方法
  params:{
         // get请求使用params进行参数凭借,如果是post请求用data
    type: '',
    page: 1
  }
}).then(res => {
     
  // res为后端返回的数据
  console.log(res);   
})

并发请求axios.all([])

function getUserAccount() {
   
    return axios.get('/user/12345');
}

function getUserPermissions() {
   
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (res1, res2) {
    
    // res1第一个请求的返回的内容，res2第二个请求返回的内容
    // 两个请求都执行完成才会执行
}));