Axios使用总结

Posted 2020-12-12 hhhqqq

概述

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