一文带领axios初学者走出雾霾的axios详细介绍及基本使用(一)-创新互联-乐山大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

一文带领axios初学者走出雾霾的axios详细介绍及基本使用(一)-创新互联

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，成都创新互联面向各种领域：展览展示等成都网站设计、成都全网营销推广解决方案、网站设计等建站排名服务。

axios介绍

axios的引入

axios中get及post请求的基本使用

axios介绍

相信作为一名前端玩家，肯定少不了发送http网络请求的时候。这个时候都会使用浏览器为我们提供的一个API，也就是Ajax。但是Ajax的使用需要我们每次通过 XMLHttpRequest 构造函数去new一个 XML(小黄人) 的实例出来，然后去拟好请求体并发送http请求，最后通过XHR的onreadystatechange 进行状态监听并拿到返回数据，并且还需要对于返回后的数据进行一系列的处理，比如转为JS对象的类型，其中还不缺乏一系列的异步处理。如果在多个地方使用Ajax的话，这个代码量是非常繁杂且维护也是十分困难的。就好比我们使用原生JS去做开发一样，可扩展性和可维护性没有保证、团队协作困难、开发效率低下。如此的话，我们前端原生JS有前辈为我们开发的框架，那么，Ajax也有它自己的框架 --- Axios。

Axios是基于promise可以用于浏览器和node.js的网络请求库。因为Ajax的请求是异步的，所以它的封装是基于promise这个专门用于处理异步的api去实现的。所以在后续的数据接收中我们通常会在 .then 中进行操作。

Axios有一下几种特性：

1、从浏览器创建 XMLHttpRequests，axios在封装中已经为我们new了实例对象供后续的使用。我们在使用过程中不用管axios的创建问题。

2、从 node.js 创建 http 请求，可以让我们直接在node环境中进行使用。

3、支持 Promise API，因为axios是基于promise进行的封装操作，所以在后续的使用中我们无需太在意同步异步的问题。

4、拦截请求和响应，axios为我们提供了强大的请求和响应拦截api，可以让我们在请求发送和数据返回之前去定义自己的逻辑操作。

5、转换请求和响应数据，通过axios为我们提供的transformRequest、 transformResponseapi等api，可以在发送和响应中对data数据体进行任意转换处理。

6、取消请求，使用cancelToken这个api可以让取消上一次发送的请求，通常可以去处理例如用户疯狂发送请求的情况，类似于节流，当服务器响应数据后才会允许进行下次请求。

7、自动转换JSON数据，使用axios返回的数据直接是JS对象类型的，不需要我们再使用JSON.parse的字符串转对象方法。

8、客户端支持防御XSRF

axios的引入

如果使用html文件使用axios的话，阔以通过一下代码进行引入。

如果在项目中使用，直接 npm install axios 进行安装即可。

axios中get及post请求的基本使用

同样是get请求，在axios中它能够通过两种方式实现。

1、通过调用get函数实现，这里的参数可以是一段字符拼接在url路径后面，也可以再传入一个配置对象{params:{参数名：值}}进去

axios.get('http://localhost:3000/user?ID=12345')
  .then((response) =>{
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>{
    // 处理错误情况
    console.log(error);
  })

// 如果不写.get的话，默认是get请求
axios('/user,{params:{ID: 12345}}).then((response) =>{})

2、通过直接调用axios的实现，这里传入一个配置对象。

axios({
	method: "GET",
	url: "http://localhost:3000/user?ID=12345",
    // 或者
    // url: "http://localhost:3000/user",
    // {params:{ID：12345}}
}).then((response) =>{
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>{
    // 处理错误情况
    console.log(error);
  })

axios同时也支持 async/await 的写法

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

post请求通常用于向服务器提交数据，下面看看它的写法：

axios({ // 发送AJAX请求
	// 请求类型
	method: "POST",
	// 需要提交数据的URL路径
	url: "http://localhost:3000/posts",
	// 设置发送的数据体(新增内容)
	data: {
	    title: "已经步入深秋了，树叶渐渐的开始下落了！",
	    author: "不读诗意",
    }
}).then((response) =>{
    console.log(response);
})
.catch((error) =>{
    console.log(error);
})

专题中还有axios的一系列深入学习，希望能够有所帮助！

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

文章名称：一文带领axios初学者走出雾霾的axios详细介绍及基本使用(一)-创新互联
当前URL：http://lswzjz.com/article/dgjdje.html

新闻中心

其他资讯