关键词：

概述

1. 什么是Axios

   ajax i/o system，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

2. 为什么学习Axios

   支持 Promise API 、支持拦截请求和响应、在浏览器中发送 XMLHttpRequests 请求、在 node.js 中发送 http 请求等等

应用

场景：在 Vue 开发项目中使用 Axios 框架

简单使用

1. 安装

   npm install axios --save
   

2. 在 main.js 中导入

   import axios from ‘axios‘
   

3. 基本使用

   axios(
     url: ‘http://...‘
   ).then(res => 
     console.log(res)
   ).catch(err => 
     console.log(err)
   )
   

一些配置

开发中请求的时候有些参数是固定的，相同的，如：baseURL、header...可以进行抽取，进行 Axios 的全局配置

axios.defaults.baseURL = ‘...‘	// 配置请求 根路径 
axios.defaults.timeout = 10000	// 配置 请求超时时间
...

Axios实例

有时候使用全局的 axios 来进行网络请求并不合适，比如需要从不同的 url 来请求一些数据，所以就需要创建 axios 实例，每个实例就能拥有自己独立的全局配置

1. 创建实例并使用

   const instance1 = axios.create(
     baseURL: ‘...‘,
     timeout: 10000
   )
   
   instance1(
     url: ‘/category‘
   ).then(res => 
     console.log(res)
   )
   
   instance1(
     url: ‘/music‘
   ).then(res => 
     console.log(res)
   )
   

Axios的封装

1. 不进行封装

   <template>
     ...
   </template>
   
   <script>
     // 01. 导入 axios
     import axios from ‘axios‘
   
     export default 
       name: "test",
       data() 
         return 
           data: ‘‘
         
       ,
       created() 
         // 02. 进行网络请求
         axios(
           url: ‘...‘
         ).then(res => 
           this.data = res.data
         )
       
     
   </script>
   
   <style scoped>
     ...
   </style>
   
   

   存在的问题：

   • 该组件对于 axios 框架的依赖性太强

   假设有50个组件都使用了 axios 框架，当axios的配置格式发生变动，维护起来就很困难，或者当 axios 不再维护了，需要用其他的网络请求框架，以这样的形式进行编写的网络请求都很难维护，所以需要对 axios 这样的第三方框架进行封装

2. 进行封装

   • 新建一个js文件，对axios进行封装，如 test.js

     import axios from ‘axios‘
     
     export function request(config) 
       // 01. 创建 axios 实例
       const instance = axios.create(
         baseURL: ‘...‘,
         timeout: 1000 * 60  //  1 分钟
       )
     
       // 02. 发送网络请求
       return instance(config)
     
     

   • 新建相应模块的js文件进行网络请求，如resource.js

     import request from "./test.js";
     
     /**
      * 获取资源
      * @param page 页码
      * @returns *
      */
     export function getResData(page) 
       let formData = new FormData()
       formData.append(‘page‘, page)
     
       return request(
         url: ‘/shares/get‘,
         method: ‘post‘,
         data: formData
       )
     
     

   • 在组件中使用请求

     <template>
       ...
     </template>
     
     <script>
       // 01. 导入 封装的请求
       import  getResData  from "../../network/resource.js";
     
       export default 
         name: "test",
         data() 
           return 
           	page: 1
             data: ‘‘
           
         ,
         created() 
           // 02. 进行网络请求
           getResData(this.page).then(res => 
           	console.log(res)
           ).catch(err => 
           	console.log(err)
           )
         
       
     </script>
     
     <style scoped>
       ...
     </style>
     

     这样封装后这个组件依赖的就是自己封装的js文件，维护起来更快

遇到的问题

1. 问题描述

   项目里已经解决了 axios 跨域的问题（解决方法参考：https://www.cnblogs.com/l-y-h/p/11815452.html），但在使用 element-ui 的 upload 上传组件还是存在跨域问题

2. 文件上传组件代码

   <el-upload
     class="upload-demo"
     ref="upload"
     action="https://..."
     :on-preview="handlePreview"
     :on-remove="handleRemove"
     :file-list="fileList"
     :auto-upload="false">
     <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
   </el-upload>
   

3. 出错分析

   其实看一下文件上传组件的代码就能知道这样子上传并没有经过 axios ，所以还是会出现跨域问题，所以就需要让文件的上传经过axios，仔细看了 element-ui 的手册中 upload 组件的相关内容后，发现有个 http-request 的属性，可以覆盖默认的上传行为，自定义上传的实现，所以只要将文件的上传写到该属性的方法里就行了

4. 解决

   <el-upload
     class="upload-demo"
     action
     :show-file-list="true"
     :http-request="choFile"
     :limit="1">
     <el-button slot="trigger" size="small" type="primary">选取文件<i class="el-icon-upload"></i></el-button>
   </el-upload>
   

   在自定义方法 choFile 里用 axios 实现文件的上传即可

总结

axios 是不错的一个网络请求框架，但是一定要根据自身的项目进行适当的封装，进行统一处理，方便后期的维护工作

参考文献、博客

1. Axios中文说明

   连接：https://www.kancloud.cn/yunye/axios/234845

2. axios解决跨域问题（vue-cli3.0）

   作者：累成一条狗

   链接：https://www.cnblogs.com/l-y-h/p/11815452.html

axios使用总结(代码片段)

功能简介：axios是第三方封装库，作用是在框架中使用数据请求安装：npminstallaxios–S在Vue项目文件中的main.js文件，定义axios请求类的全局引用。核心代码如下 特点：1.它在浏览器中创建的是浏览器对象2.它底... 查看详情

axios使用知识点总结(代码片段)

概要最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。GET请求不同方式结果不同官方文档我们可以看到的示例demo如下：//直接在请求理解里面拼接参数get参数axios.get('... 查看详情

axios使用知识点总结(代码片段)

概要最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。GET请求不同方式结果不同官方文档我们可以看到的示例demo如下：//直接在请求理解里面拼接参数get参数axios.get('... 查看详情

vue使用axios发送请求(代码片段)

...求方法2.config对象的配置方法3.发送并发请求二、数据的使用总结关于AxiosAxios是基于Promise的HTTP库,其支持:从node.js创建http请求PromiseAPI(Promise相关用法)拦截请求(axios拦截器)和响应转换请求数据和响应数据取消请求Vue.js官方推荐使... 查看详情

axios关于qs序列化问题总结(代码片段)

qs安装//安装qs,执行如下指令cnpminstallqs在Vue项目文件中的main.js文件，定义qs序列化工具类的全局引用。核心代码如下：axios表单请求，需要进行参数序列化针对post表单请求，需要进行请求参数序列化，实例代码... 查看详情

前端热门技术axios详细讲解——取消异步请求(代码片段)

上一篇总结了axios的基本使用，请点击这里今天呢，我们来讲一下如何取消axios的异步请求。一、AbortController从v0.22.0开始，Axios支持AbortController以fetchAPI的方式取消请求：constcontroller=newAbortController();axios.get('/f 查看详情

vue3+cli4.5.x中使用“vue-axios“(代码片段)

vue-axios文章目录vue-axios前言一、安装vue-axios二、使用方法1.第一种方法:2.第二种方法:3.第三种方法:三、与普通请求方法的区别?总结前言我是在cli4.5.x+vue3环境下做的,所以代码看起来可能有些离谱.这是一个基于vue并进行了轻度... 查看详情

vue下载文件方式总结(代码片段)

第一种方式:使用window.location.href限于使用get方式downloadRest(scope)this.$axios(method:'post',url:'/api/upload/file/preview',data:"filePath":scope.row.filePath,headers:'Content-Ty 查看详情

axios的简易封装(代码片段)

...简易封装一些简单的封装，主要总结一下interceptors的使用。初步封装这一步主要是添加response的interceptors，这里只是处理了当状态为200时，将直接返回data.data，这样在其他地方获取数据的时候就不需要进行解构。... 查看详情

axios和洋葱模型中间件(代码片段)

axios和洋葱模型中间件前言MiddleWare类实现HttpRequest类实现使用总结前言前段时间阅读了axios的源码，代码量不多，而且相对vue源码来说要简单很多，其中的设计思想也非常巧妙。阅读完之后，我就实现了一个微信小... 查看详情

12.20总结(代码片段)

vue的ajax插件：axios1）安装插件(一定要在项目目录下)：>:cnpminstallaxios2）在main.js中配置：importaxiosfrom'axios'Vue.prototype.$axios=axios;3）在任何一个组件的逻辑中发送ajax请求：this.$axios(url:'http://127.0.0.1:8000/cars/',method:'ge... 查看详情

axios(代码片段)

axios在vue中使用axios进行ajax请求结合使用axios访问API官方文档先使用npm安装axios，npminstall--saveaxios然后在main.js中导入，参考Vue中如何使用axios，附上直接可用的简单例子importaxiosfrom'axios';importQsfrom'qs'Vue.p 查看详情

vue3中axios的安装及使用(代码片段)

...c;必须要用和后台进行合作，我们始终绕不开对axios的使用，vue3中axios进行了一些重要的更新，在这里分享给大家一、什么是axios？Axios是一个基于promise网络请求库，作用于node.js和浏览器中Axios在服务端它使用... 查看详情

vue项目axios的使用实例详解(代码片段)

文章目录0、安装1、基本用法2、axios实例2.1、创建axios实例示例代码2.2、axios全局配置示例代码2.3、axios实例配置示例代码2.4、axios请求配置示例代码3、axios请求方法3.1、get请求示例代码3.2、post请求3.3、put和patch请求示例代码3.4、de... 查看详情

vue中import引入文件和使用的方式总结(代码片段)

...三方文件　　import router from ‘./router‘;　　使用this.router;2引入模块，字符串，数值，函数，类获取按需导入　　import  testFun,string,number,class from ‘../js/test.js‘;　　使用testFun(),string,number,class.a3引入整... 查看详情

axios介绍和使用(代码片段)

...请求自动转换JSON数据客户端支持防御XSRF二、Axios的基本使用1、Axios安装方法使用npm：$npminstallaxios使用bower：$bowerins 查看详情

vuejs基础总结（one）(代码片段)

...、active-class是vue-router模块的router-link组件的属性　　(2)、使用children定义嵌套路由2、怎么定义vue-router的动态路由?怎么获取传过来的值　　在router目录下的index.js文件中，对path属性加上/:id。　　使用router对象的params.id获取3、vue-r... 查看详情

javascript使用axios捕获请求错误(代码片段)

查看详情