码迷,mamicode.com
首页 > 移动开发 > 详细

Axios使用总结

时间:2020-06-25 19:21:14      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:view   维护   UNC   com   href   中文   --   自身   als   

概述

  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使用总结

标签:view   维护   UNC   com   href   中文   --   自身   als   

原文地址:https://www.cnblogs.com/hhhqqq/p/13192543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!