什么是Axios ?

Posted 2023-04-07 穆倩倩

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了什么是Axios ?相关的知识，希望对你有一定的参考价值。

目录

一. 什么是Axios？

1.axios的特性

2.axios 的使用

二. Axios 的实际应用

1.axios请求的方式

2.axios的适用场景

三.Axios 和 ajax 的区别

1. axios 和ajax 的区别

2.两者各自的优缺点

一，什么是Axios？

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

1.axios的特性

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

2.axios 的使用

首先要安装模块：

npm install axios

在cmd或者终端都可以运行代码，引入模块后可以直接使用。

二.Axios 的实际应用

例如：

// 发起一个post请求
axios(
  method: 'post',
  url: '/user/12345',
  data: 
    firstName: 'Fred',
    lastName: 'Flintstone'
  
);

1.axios请求的方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

.......

注：axios的请求方式有很多，我们常用的get ,post 请求，其他的并不常用。想要了解更多可以去axios官网。

// 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123')

.then((res) => 

  console.log(res)

)

.catch((err) => 

  console.log(err)

)// 第二种方式  将参数直接写在params中axios.get('/getMainInfo',   params: 

    id: 123

  

)

.then((res) => 

  console.log(res)

)

.catch((err) => 

  console.log(err)

)

2.axios的适用场景

在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。

三. Axios 和 ajax 的区别

1.两者各自的优缺点

axios的优点：

从浏览器中创建 XMLHttpRequest
支持 Promise API
从 node.js 创建 http 请求
转换请求和响应数据
自动转换JSON数据

axios的缺点：

ajax的优点：

无刷新更新数据

　　　　异步与服务器通信

　　　　前端和后端负载平衡

　　　　基于标准被广泛支持

　　　　界面与应用分离

ajax的缺点：

对搜索引擎不友好
要实现Ajax下的前后退功能成本较大
跨域问题限制

2..Axios 和 ajax 的区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注：传统Ajax 指的是 XMLHttpRequest（XHR），
　　axios和jQuer ajax都是对Ajax的封装、

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create(
  baseURL: 'https://api.example.com'
);

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) 
    // 在发送请求之前做些什么
    return config;
  , function (error) 
    // 对请求错误做些什么
    return Promise.reject(error);
  );

// 添加响应拦截器
axios.interceptors.response.use(function (response) 
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  , function (error) 
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  );

Axios使用总结

概述

什么是Axios

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

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

应用

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

简单使用

安装
```
npm install axios --save
```
在 main.js 中导入
```
import axios from ‘axios‘
```

基本使用

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 实例，每个实例就能拥有自己独立的全局配置

创建实例并使用

const instance1 = axios.create({
  baseURL: ‘...‘,
  timeout: 10000
})

instance1({
  url: ‘/category‘
}).then(res => {
  console.log(res)
})

instance1({
  url: ‘/music‘
}).then(res => {
  console.log(res)
})

Axios的封装

不进行封装

<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 这样的第三方框架进行封装

进行封装

新建一个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文件，维护起来更快

遇到的问题

问题描述

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

文件上传组件代码

<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>

出错分析

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

解决

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

参考文献、博客

Axios中文说明

连接：https://www.kancloud.cn/yunye/axios/234845
axios解决跨域问题（vue-cli3.0）

作者：累成一条狗

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

以上是关于什么是Axios ?的主要内容，如果未能解决你的问题，请参考以下文章

前端知识扫盲VUE知识篇三（axios知识）

前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)

axios是前端负责吗写吗

ajax和axios要都学吗

axios封装之前端为什么要做请求拦截

electron-vue项目中开发环境中的axios跨域问题