1,axios 是一个基于 promise 来管理 http 请求得简洁, 易用, 高效得代码封装库
是一个能替代 Ajax 得, 能发送 http 接口请求得, 并且是基于 promise 得一个管理异步得操作
2, 特征:
从浏览器中创建 XMLHttpRequest 对象
从 node 中创建 http 请求
支持 Promise
可以拦截请求和响应
转换请求得数据和响应得数据
取消请求
自动转换 JSON 数据
3, 使用方法:
- // 局部
- import axios from 'axios'
- axios('t').then(function(res){
- console.log(res.data.data)
- that.list=res.data.data
- })
- // 全局
- import axios from 'axios'
- vue.prototype.$http=axios
- his.$http('XXXXX').then(function(res){
- // // console.log(res.data.data)
- // that.list=res.data.data
- // }).catch((error)=>{
- // console.log(error.response.data+"错误数据")
- // console.log(error.response.status+"错误状态码")
- // console.log(error.response.headers+"错误的头部信息")
- // })
4, 需要配置得参数:
url: 路径
method: 提交方式
data: 向后台发送得数据
- axios({
- url: '',
- method: 'post/get',
- data: {
- } // 以对象得方式进行表示得
- }).then(function (data) {
- })
then: 回调函数, 再这个回调函数中, 处理 axios 返回得数据, 会把返回得数据放在回调函数得参数中
5, 简写方式:
提交方式是 get:axios.get('url',{data:{}})
提交方式是 post:axios.post('url',{data:{}})
不管是 fetch 也好还是 axios 还是 Ajax 默认都是 get 请求方式
axios('url')
6, 再 vue 中如果想要获取静态资源得话, 必须要放在 static 文件夹中, 否则没有办法显示, 网站得图片, 请求得文件
7, 对于 axios 来说, 只要是存在返回得数据, 那么这些数据都是放在返回得 promise 对象得 data 中, 如果想要获取得话直接从 data 中进行获取即可
8, 如果 axios 是明文获取, 直接使用 get 方法
axios.get
如果是密文获取, 就直接使用 post 方法即可
axios.post
9, 因为本身 axios 是基于 promise 对象想的
then:resolve 和 reject 两个回调函数都会在 then 方法中进行处理, 不管是成功也好, 还是失败也好, 都是通过 then 方法进行处理得, 如果是成功一般我们会直接处理数据
失败: 可以使用 catch 方法对异常进行捕获, 捕获得错误信息都放在得是回调函数得参数中, 使用 response 获取错误对象
data: 错误数据
status: 错误状态码
headers: 错误得头部信息
10,axios 中处理多并发使用得是 all 来进行处理得
axios.all([执行第一个 axios 得函数 (), 执行第二个 axios 请求得函数 ()])
- // 并发
- function test () {
- return axios('static/js/index.json')
- }
- function testa () {
- return axios('static/js/index.json2')
- }
- axios.all([test(),testa()]).then(axios.spread(function(res,resa){
- console.log(res.data)
- console.log(resa.data)
- }))
来源: http://www.bubuko.com/infodetail-3608280.html