什么是 axios？

1、Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、特性

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

3、安装步骤

npm install axios 或者 yarn 或者 cnpm

4、axios的原理：

// 封装Ajax,实现axios进行回调

 var axios = {get: function(url){return new Promise((resolve,reject) => {var  xhr = new  XMLHttpRequest();xhr.open('get',url,true) ;xhr.onreadystatechange = function(){if (xhr.readyState == 4 && xhr.status == 200) {// 从服务端获取数据// fn.call(this, xhr.responseText)resolve(xhr.responseText)}};xhr.send();})              },}

axios API

可以通过向 axios 传递相关配置来创建请求
axios(config) config是一个配置选项对象： {属性名：属性值}

{method:"get" || "post",url:"url地址",//post请求  数据放在data中data:{username:"admin",password:"admin"},//get请求：  数据放在params中    字符串拼接params:{username:"admin",password:"admin"},headers:{token: "一窜字符串"},timeout: 3000 }

// 发送 POST 请求
axios({method: 'post',
url: '/user/12345',
data: {firstName: 'Fred',lastName: 'Flintstone'
}
});

实例方法 http请求方法封装的

以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

并发基于promise封装 Promise.all() Promise.race() Promise.spread（）

处理并发请求的助手函数
axios.all(iterable) axios.all([getUser(),getNumber(),getProduct()])
axios.spread(callback)

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

axios请求的使用

 <template><div class="hello"><h2> axios的使用</h2><a href="javascript:"   class="btn btn-primary"  @click="get">GET请求</a><a href="javascript:"   class="btn btn-primary"  @click="post">POST请求</a><a href="javascript:"   class="btn btn-primary"  @click="http">HTTP请求</a></div></template><script>import axios from "axios"export default {name: 'HelloWorld',data () {return {}},methods:{get(){axios.get("https://cnodejs.org/api/v1/topics",{//get参数params:{tab:"share",page:3},headers:{token:"tom"}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})},post(){axios.post("https://cnodejs.org/api/v1/accesstoken",{//post参数accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"},{headers:{token:"tom"}}  ).then(res=>{console.log(res)}).catch(error=>{console.log(error)})},http(){axios({//url:"https://cnodejs.org/api/v1/topics",//method:"get",//get参数//params:{//  tab:"share",//  page:2//},url:"https://cnodejs.org/api/v1/accesstoken",method:"post",//post请求参数 data:{//post参数accesstoken:"80afb815-b9f6-48e7-8370-7647e4d74d87"},headers:{token:"tom"},timeout: 10000,}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})}}}</script>
## 取消axios请求使用 cancel token 取消请求Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

什么是 axios？相关推荐

前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
android post请求_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
Vue开发使用Axios遇到了大坑！
使用Vue的axios连接部分正常,部分不正常,服务器状态码200,服务器端控制台也不报错.但是页面请求就是报错.使用iPhone手机报错,换华为安卓手机也是一样的报错,安卓手机不知道怎么调试,使用m ...
进一步封装axios并调用其读取数据（吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持，在这两种情况下的系统只能使用ajax或者原生js请求后台数据）
注意!!!(修改于2020年7月18日) 在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据报错截图如下报错内容: {&quo ...
偏前端 - vue-cli(axios请求数据==》token+按接口参数顺序（参数值拼接base64）- MD5)...
token+按接口参数顺序(参数值拼接base64)-> MD5) 请教于"喵咪",再此特别鸣谢!~ 特别强调:import qs from qs; 这个内部方法一定要用哦. ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
vue项目构建实战基础知识：SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除...
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为单页应用程序或单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
vue 网络请求 axios vue POST请求 vue GET请求代码示例
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 1.安装 axios 和 vue-axios 和 qs (qs是为了解决post默认使用的是x-www-f ...
vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
axios不发起请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...

什么是 axios？

1、Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、特性

3、安装步骤

4、axios的原理：

axios API

实例方法 http请求方法封装的

并发基于promise封装 Promise.all() Promise.race() Promise.spread（）

拦截器

axios请求的使用

什么是 axios？相关推荐

最新文章

热门文章

什么是 axios？

1、Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、特性

3、安装步骤

4、axios的原理：

axios API

实例方法 http请求方法封装的

并发 基于promise封装 Promise.all() Promise.race() Promise.spread（）

拦截器

axios请求的使用

什么是 axios？相关推荐

最新文章

热门文章

并发基于promise封装 Promise.all() Promise.race() Promise.spread（）