本文共 3195 字,大约阅读时间需要 10 分钟。
axios是一个基于Promise的Http库,可以用在node.js环境和浏览器中
这里就简单的介绍一种安装方式:npm安装
npm install axios
还是其他两种方式:bower安装和cdn安装
import axios from 'axios'//第一种方式axios.get("http://127.0.0.1:8000/home/data?type=sell&page=1") .then(res=>{ console.log(res)}) .catch(err=>{ console.log(err)})//第二种方式axios.get("http://127.0.0.1:8000/home/data",{ params:{ type:'sell' page:1 } }).then(res=>{ console.log(res.data) }).catch(err=>{ console.log(err) })
import axios from 'axios'axios.post("http://127.0.0.1:8000/home/data",{ id:1,username:'zhangsan',age:18}) .then(res=>{ console.log(res)}) .catch(err=>{ console.log(err)})
有时候我们可能需要同时发送多个请求来获取结果,此时就可以使用axios.all([]),可以放入多个请求的数组
axios.all([])返回的是一个数组对象
import axios from 'axios'axios.all([axios.get("http://127.0.0.1:8000/home/multidata"), axios.get("http://127.0.0.1:8000/home/data",{ params:{ type: 'sell', page:1 } }) ]).then(res=>{ console.log(res[0]); console.log("======================"); console.log(res[1]); })
我们可以设置一些默认设置,这些设置将在以后每次的请求中生效。比如我们的请求路径、请求头参数等等
axios.defaults.baseURL = 'http://127.0.0.1:8100/test'; axios.defaults.headers.contentType = "application/json;charset=UTF-8"; axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN'
当我们从axios模块中导入对象时,使用的实例时默认实例。当给该实例设置一些默认的配置时,这些配置就被固定下来了。但是,当后续开发中,某些配置可能不一样。比如,某些请求需要特定的baseURL或者请求头参数等,这个时候,我们就需要创建新的实例,并且传入属于该实例的配置信息。
import axios from 'axios'//创建axios实例const axiosInstance = axios.create({ baseURL:'http://127.0.0.1:8100', headers:{ 'Content-Type':'application/json'} timeout:5000 })//使用axios实例发送请求axiosInstance.get('/data',{ params:{ type:'sell', page:2 } })
我们可以在一个单独的js文件中,封装很多个axios实例,然后导出方便在项目开发中应对不同的需求而需要的不同axios实例。
axios提供了拦截器,用于我们在发送每次请求或者得到响应后,进行对应的处理。
配置请求和响应拦截:
import axios from 'axios';/** * 封装axios * @param config * @returns {AxiosPromise} */export default function request(config) { const instance = axios.create({ baseURL: 'http://127.0.0.1:8100/test', timeout: 5000 }); instance.interceptors.request.use(config=>{ console.log('请求成功的拦截器中'); return config },error => { console.log('请求错误的拦截器中'); return error; }) instance.interceptors.response.use(config=>{ console.log('响应成功的拦截器中'); return config; },error => { console.log('响应失败的拦截器中'); return error; }) return instance(config);}
在其他组件中使用:
import request from './network/request';request({ url:'/user', method:'post', data:{ id:1,username:'lisi',age:19} }).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); })
结果:
转载地址:http://bqmbi.baihongyu.com/