Vue的学习 —— ＜网络哀求库Axios＞

目录
媒介
正文
一、Axios基本概念
二、安装Axios
三、Axios使用方法
四、向服务器发送哀求

---

媒介

在之前的开辟案例中，我们通常直接在组件中界说数据。但在实际的项目开辟中，我们必要从服务器获取数据。当其他用户希望访问我们自己编写的网页时，服务器就显得尤为紧张。在传统的网页开辟中，我们通常使用Ajax来实现JavaScript步伐与服务器之间的交互。而在Vue框架中，更推荐使用Axios库来实现这种交互。
正文

一、Axios基本概念

Axios是一个基于Promise的HTTP库，可以发送get、post等哀求，它作用于欣赏器和Node.js中。当运行在欣赏器时，使用XMLHttpRequest接口发送哀求；当运行在Node.js时，使用HTTP对象发送哀求。
Axios的主要特性如下：

• 支持所有的 API。
  
• 支持拦截哀求和相应。
  
• 可以转换哀求数据和相应数据，并可以将相应的内容自动转换为JSON范例的数据。
  
• 安全性高，客户端支持防御跨站哀求伪造（Cross-Site Request Forgery，CSRF）。
  

二、安装Axios

Axios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。

• 通过标签引入：使用Unpkg的CDN服务引入Axios。
  
  1. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  复制代码
• 使用包管理工具引入
  
  1. import axios from 'axios'
  2. const request = axios.create({
  3.  timeout: 2000
  4. })
  5. export default request

  复制代码

下面演示使用包管理工具安装Axios：
打开cmd下令行窗口进入到D:\webProject\Demo05\my-router目录中，执行"yarn add axios --save"安装下令，结果如下图所示：

三、Axios使用方法

在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。

• 将Axios封装成模块，创建src\axios\request.js文件，示例代码如下：
  
  1. import axios from 'axios'
  2. const request = axios.create({
  3.  timeout: 2000
  4. })
  5. export default request

  复制代码
• 在组件中导入模块，在src\App.vue文件中导入模块，示例代码如下：
  
  1. import request from './axios/request.js'

  复制代码

Axios常用的哀求方式：get哀求和post哀求，示例代码如下

• 使用Axios发送get哀求的基本语法格式：
  
  1. request({
  2.  url: '请求路径',
  3.  method: 'get',
  4.  params: { 参数 }
  5. }).then(res => {
  6.  console.log(res)
  7. }).catch(error => {
  8.  console.log(error)
  9. })

  复制代码
• 使用Axios发送post哀求的基本语法格式：
  
  1. request({
  2.  url: '请求路径',
  3.  method: 'post',
  4.  data: { 参数 }
  5. }).then(res => {
  6.  console.log(res)
  7. }).catch(error => {
  8.  console.log(error)
  9. })

  复制代码

四、向服务器发送哀求

下面演示通过axios向查询ip网站的服务器所在：httpbin.org/get发送哀求，获取本机网络信息，打印到开辟者控制台。
代码：

1. request({
2.    url:"https://httpbin.org/get",
3.    method:'get'
4. }).then((sucess) => {
5.    console.log(sucess)
6. }).catch((error) => {
7.    console.log(error)
8. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。