一、什么是 axios ?
axios是基于 Promise 的 ajax 封装库,也是前端目前最流行的 ajax 请求库。简单地说发送 get、post 请求,是一个轻量级的库,使用时可直接引入。
二、axios 的特点
- 异步的 ajax 请求库。
- 在浏览器端和 node 端都可以使用。
- 支持 Promise API。
- 支持请求和响应拦截。
- 响应数据自动转换 JSON 数据。
- 支持请求取消。
- 可以批量发送多个请求。
- 客户端支持安全保护,免受 XSRF 攻击。
三、axios API
3.1、安装
/* npm 安装 */ npm install axios --save /* bower 安装 */ bower install axios /* 使用 yarn */ yarn add axios /* cdn 引入 */ <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
注:如果简单静态页面使用,建议cdn方式引入。
3.2、axios API
向 axios 传输相关配置参数,创建请求。如:axios(config)
/* 如发送一个post请求的配置参数如下 */ axios({ method: 'post', //请求方法 url: '/user/12345', //访问接口 data: { //传输数据 firstName: 'Fred', lastName: 'Flintstone' } }); /* 如发送一个get请求的配置参数如下 */ axios({ method: 'get', url: 'http://localhost:80/one',//请求接口 responseType: 'stream'//响应形式 }) .then(function (response) { response.data.pipe(fs.createWriteStream('save.jpg')) //保存图片 });
3.3、axios 请求方法
上边axios API 每发起一个请求,都需要设置它的请求方法和响应头超时等信息,使用起来比较繁琐,为了方便,axios 为所有支持的请求方法提供了别名,可直接指定方式发起请求,其他参数可通过全局设置。如:
axios('/user/id=1');
上述 axios 直接发送请求,不设置请求方式时,默认使用 get 请求,与 ajax 和 fetch 相同。所以发送的是一个get请求,也可以使用 get 方法发送,如下实例:
axios.get( '1.txt' , { params:{id:'1'} } ).then(res=>{ console.log(res); }) .catch(err=>{ console.log(err); })
可简写成 axios(url,config)。
具体的其他方法分别为:
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 ]])
3.4、批量发送请求
网络请求中往往会有多个网络请求并发执行,有时需要统一处理它们返回结果,所以axios有并发处理。axios.all()可以并行发送多个网络请求,等待请求都返回之后,继续处理。
使用语法:
/* 第一种处理方式 */ axios.all([ axios.get(URL1), axios.get(URL2), ]).then(res=>{ console.log(res) //返回的res是一个数组,res[0]是第一个请求数据 res[1]是第二个请求数据 }) /* 第二种处理方式 */ axios.all([ axios.get(URL1), axios.get(URL2), ]).then( axios.spread((res1,res2)=>{ res1 //是第一个请求返回数据 res2 //是第二个请求返回数据 }) )
使用 axios.spread 能够自动分割请求返回数据。
1.5、全局默认配置
全局默认配置主要作用于每个请求。既节省敲代码的时间,想修改的时候,只需修改一个就可以全部修改掉。
常见的全局默认配置有:
axios.defaults.baseURL = "http://localhost:8080/" //配置域名 axios.defaults.timeout = 6000; //单位是毫秒,设置超时时间 /* 头设置 */ axios.defaults.headers.common['Authorization'] = AUTH_TOKEN axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
3.6、axios 实例
// 实例化的时候配置默认参数 const instance = axios.create({ baseURL: 'https://api.example.com' }); // Alter defaults after instance has been created instance.defaults.headers.common['Authorization'] = AUTH_TOKEN
之所以使用 axios 实例化,是因为全局实例化 http 请求有全局的响应拦截,当我们某些接口无法返回状态码时,我们将无法得到 response,此时我们需要在当前 api 中重新实例化一个 axios,设置新的响应拦截码。
3.7、拦截器
拦截器分为两个,有请求拦截和响应拦截,可以统一处理某些业务。
- 请求拦截器:
/* 请求拦截器 统一在发送请求之前添加token */ axios.interceptors.request.use(config=>{ config.headers.token = sessionStorage.getItem("token") //添加toke return config },err=>{ console.log(err)//请求错误 })
- 响应拦截器
axios.interceptors.response.use(response=>{ return response },err=>{ console.log(err)//响应错误 })
3.8、响应内容
基本使用中,第一个实例请求成功,打印结果 console.log(res) 。返回结果如下:
{
data:{}, status:200, //从服务器返回的http状态文本 statusText:'OK', //响应头信息 headers: {}, //config是在请求的时候的一些配置信息 config: {} }
四、axios 常见应用
axios既可以在浏览器端使用,也可以在node.js中使用。在浏览器端发送的是XMLHttpRequest,在 node.js 发送的是 http 。像VUE、React、Node等项目都可以使用axios。
今天的文章什么是 axios分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/54741.html