详解网络请求Axios

xios是什么？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。我们知道 Promise 是 js 异步的一种解决方案，它最大的特性就是可以通过 .then 的方式来进行链式调用。

其实说白了axios是对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

为什么选择axios?

vue的作者尤雨溪推荐使用axios.
符合前后端分离的趋势，及前端的MVVM的浪潮

功能特点：

在浏览器中发送XMLHttpRequests请求

在node.js中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

支持多种请求方式：

axios(config)

axios.request(config)

axios.get(url, [, config])

axios.delete(url, [, config])

axios.head(url, [, config])

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

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

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

Axios的基本使用

axios的使用比较简单，文档讲得也非常清晰，你应该先阅读axios的官方文档：axios文档。

在html页面中直接引入使用:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Html页面基本使用

以下案例中的get请求地址为crmeb相关演示站地址，可用于测试获取！

获取一个get请求

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 这里可以省略，默认为get
  }).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  })  
</script>

在get请求的url中传参，只需要定义一个params:{}即可！

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 这里可以省略，默认为get
    // 这里的键值对会拼接成这样url?page=1&limit=3
    params: {
      page: 1,
      limit: 3
    }
  }).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  })  
</script>

发送一个post请求，与get请求类似，只需要将method改为post，定义一个data:{}即可,data中的数据则是服务器需要接收的字段数据！

<script>
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    // 返回请求到的数据
    console.log(res)
  }).catch(err => {
    // 返回错误信息
    console.log(err)
  });
</script>

发送一个并发请求

如果在开发中需要等到多个接口的数据同时请求到后才能继续后边的逻辑，那么即可使用并发请求，axios并发请求，使用all方法，all方法的参数为一个数组，数组的每个值可以为一次请求，请求完成后直接.then即可合并两次请求的数据，返回结果为一个数组！

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
</script>

如果你想自动把这个数组展开的话在then()方法中传入axios.spread()方法即可，如下所示：

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
</script>

但在使用vue组件化开发的时候一般我们会通过npm安装，引入项目！

组件化开发中使用

使用npm进行安装

npm install axios --save

一般在实际项目中我们并不会像上边这样直接去使用axios请求数据，而是将axios封装在一个单独的文件，这样做的目的主要是用来抽取公共逻辑到一个配置文件里，对这些公共逻辑做一个封装，即使某一天这个axios框架不维护了，或者出现了重大bug也不再修复的时候，我们可以只修改配置文件即可达到全局修改的目的，如果把每次请求逻辑都写到对应的组件中，那修改起来简直就是一个噩梦！

封装一个axios的请求文件request.js

在项目的src目录下创建一个network文件夹，再在其中创建一个request.js文件，路径为：src/network/request.js

// src/network/request.js

// 引入axios
import axios from 'axios'

// 这里未使用default导出，是为了以后的扩展，便于导出多个方法
export function request(config){
    // 创建axios实例
    const instance = axios.create({
        // 这里定义每次请求的公共数据，例如全局请求头，api根地址，过期时间等
        // 具体参数可参考axios的官方文档
        baseURL: 'http://demo26.crmeb.net/api',
        timeout: 5000
    })
    
    // 拦截请求，如果获取某个请求需要携带一些额外数据
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 拦截响应
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
    
    // 发送请求
    return instance(config)

使用我们封装的request请求

一般我们会将所有的请求放在一个api.js文件中，将每次请求封装为一个方法,比如我这里会在request.js的同目录创建一个api.js文件封装我们所有的请求。

import { request } from '../api/request'

// 获取分类
export const getHomeCategory = () => {
    return request({
        url: '/category'
    })
}

// 获取banner图
export const getHomeBanner = () => {
    return request({
        url: '/pc/get_banner'
    })
}

之后再在组件中引入调用导出的相关接口方法即可，如：

import { getHomeBanner } from "../network/api"

getHomeBanner().then(res => {
	console.log(res)
})

以上就是一个简单的封装，其中有个拦截请求和拦截响应，可能很多初学的人理解起来有点吃力，我在这里以个人浅见阐述，希望能带给你些许启发！

何为拦截器？

还是发挥阅读理解能力，拦截拦截其实就是此路是我开，此树是我栽，要想过此路，留下买路钱，拦截请求就是比如某些请求需要携带一些额外的信息才能访问，实际项目中最常见的就是需要登录后才能查看的信息，请求中就必须携带token才能访问，就可以在这里处理，还有拦截响应，比如请求到数据之后，发现不符合要求，先拦下来处理一下，再返回给前端，这就是一个拦截器的基本工作流程！

axios有一个全局拦截的方式：axios.interceptors()

拦截成功后必须return返回，否则数据无法请求到

如下所示：

  // 拦截请求，如果获取某个请求需要携带一些额外数据
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 拦截响应
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )

axios还为我们提供了一些全局配置，如下：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

当然也可以将其配置在我们之前创建的axios实例中，使其只作用于某个实例！

然后来看一下 axios 的所有配置信息:

数据来自axios中文文档

JavaScript开发中，发送HTTP请求和处理响应是非常常见的任务。axios是一种流行的JavaScript库，它提供了一个简单的API用于发送HTTP请求。本文将介绍如何在JavaScript中使用axios，并提供一个实际的示例。

安装和导入axios

在使用axios之前，我们需要先安装它。可以使用npm命令行工具来安装axios。

npm install axios

安装完成后，我们需要将axios导入到我们的脚本中。

import axios from 'axios';

发送请求

使用axios发送请求很简单，只需要提供请求URL和可选参数即可。

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data));

在上面的示例中，我们向一个API发送了一个请求，并在.then()方法中输出响应数据。

如果遇到了错误，axios会返回rejected状态的Promise对象。因此，在终止回调链之前应始终使用.catch()处理错误。

axios.get('https://jsonplaceholder.typicode.com/todos/0')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

在上面的示例中，我们向一个不存在的API发送了一个请求，因此axios返回rejected状态的Promise对象。在.catch()方法中，我们捕获了这个错误并输出它的信息。

发送POST请求

axios也可以用来发送POST请求。要发送POST请求，需要使用axios.post()方法。

axios.post('https://example.com/api', {
  username: 'user',
  password: 'pass'
})
.then(response => console.log(response.data));

在上面的示例中，我们向一个API发送了一个POST请求，并在.then()方法中输出响应数据。

设置请求头

使用axios还可以设置请求头，使我们的请求更具有灵活性。

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
  headers: {
    'Authorization': 'Bearer ' + getToken()
  }
})
.then(response => console.log(response.data));

在上面的示例中，我们向一个API发送了一个请求，并设置了一个自定义的请求头Authorization。

并发请求

axios允许我们发送并发请求。以下是一个示例代码，演示如何发送多个请求并获取它们的响应：

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(axios.spread((response1, response2) => {
  console.log(response1.data);
  console.log(response2.data);
}))
.catch(error => console.log(error));

在上面的示例中，我们使用axios.all()方法传递一个包含两个请求的数组。在.then()方法中，我们使用axios.spread()方法将两个响应对象分别传递给回调函数。

总结

axios是一种流行的JavaScript库，它提供了一个简单的API用于发送HTTP请求。在本文中，我们介绍了如何安装和导入axios、如何发送请求、如何发送POST请求、如何设置请求头以及如何发送并发请求。axios使用非常方便，几乎可以支持所有的请求类型，并具有对Promise的支持。使用时需要注意的是，我们需要处理rejected状态的Promise对象，以及进行错误处理。

者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

2. 父组件向子组件传值的方法？

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）

props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

详细介绍看这篇：Vue 父组件向子组件传值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子组件向父组件传值的方法？

子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。

详细介绍看这篇：Vue子组件向父组件传值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么？哪种功能场景使用它？

Vuex 是专门为 Vue.js 设计的状态管理模式，它采用集中式储存管理 Vue 应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

当项目庞大的时候使用它：

需要动态的注册响应式数据；
需要命名空间 namespace 来管理组织我们的数据；
希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。

5. Vuex 有哪几种属性？

state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。

6. 如何让 CSS 旨在当前组件中起作用？

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。
created：vue 实例的数据对象 data 有值了，$el 没有。
beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。
mounted：vue 实例挂载完成，data.filter 成功渲染
beforeUpdate：data 更新时触发。
updated：data 更新时触发。
beforeDestroy：组件销毁时触发。
destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。

8. Vue 生命周期总共有几个阶段？

beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

9. 说出至少 4 种 Vue 当中的指令和它的用法？

v-html：渲染文本（能解析 HTML 标签）
v-text：渲染文本（统统解析成文本）
v-bing：绑定数据
v-once：只绑定一次
v-model：绑定模型
v-on：绑定事件
v-if v-shou：条件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。
node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。
src文件夹：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。
其他文件：定义的一些项目信息，说明等等。

12. vue-router 路由的两种模式。

hash 模式：

# 后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。

history 模式：

利用了 HTML5 中新增的 pushState 和 replaceState 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

13. 如何解决 Vue 中的 ajax 跨域问题？

找到 config 文件夹中的 index.js 文件：

修改 proxyTable: {
'/api':{ //使用 /api 来代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改变源
pathRewrite:{
'^/api':'http://localhost:8082' //路径重写
}
}
},

修改完之后的跨越请求就可以直接写成 /api/login 等等了。

14. Vue 打包命令是什么？Vue 打包后会生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。

15. Vue 如何优化首屏加载速度？

异步路由加载
不打包库文件
关闭 sourcemap
开启 gzip 压缩

16. scss 是什么？

SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。

17. axios 是什么？怎么使用？

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

特定：

可以在浏览器中发送 XMLHttpRequest 请求
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应
转换请求数据和响应数据
能够取消请求
自动转化 JSON 格式
客户端支持保护安全免受 XSRF 攻击

如何使用：

npm install --save axios 安装axios
在入口 main.js 中导入 axios

import Axios from 'axios'

Vue.propertype.$axios = Axios;

使用 axios 发送 get 请求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。

var params = new URLSearchParams;
params.append('name','孙悟空');
params.append('age',22);
let that = this;
this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
console.log(resp.data.users);
that.ausers = data.data.users;
}).catch(function(err) {
console.log(err);
});

18. vue-router 是什么？它有哪些组件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由、是图标
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的连接
HTML 5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

vue-router 组件：

< router-link to=""> 路由的路径
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的显示

19. 怎么定义 vue-router 的动态路由？怎么获取传递过来的动态参数？

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架（jQuery）的区别是什么？哪些场景适合？

Vue 是数据驱动，通过数据来显示视图层而不是节点操作。
处理数据交互的时候挺适合 MVVM 设计模式的。

本文为CSDN博主「红颜祸水nvn」的原创文章，CSDN 官方经授权发布。

原文链接：https://blog.csdn.net/qq_43647359/article/details/104774302

欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

☞比尔·盖茨退出微软公司董事会；苹果 WWDC、微软 Build 大会均改为线上举办；Rust 1.42.0 发布| 极客头条

☞11 国股市熔断，“祸及”程序员？！

☞2.2版本发布！TensorFlow推出开发者技能证书

☞Soul App 高管被捕，恶意举报导致竞品被下架

☞2020 年最新版 68 道Redis面试题，20000 字干货，赶紧收藏起来备用！

☞最近一个名为 BTCU 的比特币分叉，准备用新分叉解决比特币网络的旧问题

在线咨询

上一篇：JavaScript将HTML页面生成PDF并下载
下一篇：html5常用基本标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商