一、简介 1、axios是基于Promise,用于浏览器(script标签引入)和nodejs的,与服务端进行通信的库 2、特征:
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换为JSON数据 3、使用
- CDN地址:https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
- Node:npm install axios --save
二、使用 1、在需要的模块中引入使用: import axios from 'axios'
2、语法:
- axios( config )
- axios method
- 返回值为promise,意味着可以接着在后面使用then捕获到成功,catch捕获到error(error是给开发者看的)
3、支持的请求方式
- axios.get( url[ ,config ] )
- axios.post( url[ ,data[ ,config ] ] )
- axios.delete( url[ ,config ] )
- axios.head( url[ ,config ] )
- axios.options( url[ ,config ] )
- axios.put( url[ ,data[ ,config ] ] )
- axios.patch( url[ ,data[ ,config ] ] )
4、在具体组件内,比如table.vue,axios在created(){}里面使用,
5、
6、默认请求格式:
axios({
method: 'post',
url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
7、get发送请求,通过get方式向后端发送数据,数据是写在地址栏?后面的
axios.get('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-get-axios',{
params:{ //这个是发送给后端的参数,需要有params作为key值
key1:'xx',
key2:'yy'
}
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
8、post方式发送请求,数据是悄悄的发送的,附加在请求头里面的
axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
miaov:"课堂" //不需要params作为key值了
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
三、自定义请求实例
1、创建
axios.create( config )
2、配置
{
baseURL:'',
timeout:1000,
headers:{},
responseType:'json',
params:{},
transformRequest:[], 只适合PUT、POST和、PATCH
transformResponse:[],
validateStatus:function(){}, //验证状态码在哪个范围是成功,哪个范围是失败
cancelToken
}
demo:
hi.vue组件
import axios from 'axios';
import queryString from 'queryString'
//创建取消请求令牌
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
//可以把这个HTTP写在某一个单独的组件内,也可以提取出来放在一个js文件内,
//然后export default HTTP,在其他组件内,通过import这个js文件进行使用
var HTTP = axios.create({
baseURL:'https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/' //基本url都一样
timeout:1000 //单位是ms,请求超过这个时间就取消,即请求超时
responseType:'json', //后端返回的数据类型
header:{ //自定义请求头
'custom-header':'xiao', //Request Headers里面就多了一个custom-header:xiao,后端可以拿到这个数据
'content-type':'application/x-www-form-urlencoded' //设置这个,那么经过transformRequest处理之后的数据格式就变为了 miaov=ketang&username=leo,只支持POST请求方式
},
params:{ //查询字符串,传给后端的数据,不管是get还是post请求,这条数据都会附在url后面,发送给后端
bookId:'123'
},
transformRequest:[function(data){ //数组格式,用于转换发送数据格式,只适合PUT、POST、PATCH,data是传递给后端的数据,transformRequest类似一个中间件,发送数据,经过它来转换,需要reture出来,否则就是undefined,但是不能直接是return data,因为这样返回的是[object object],
安装queryString来处理查询字符串,格式化成一个字符串
data.age = 30; //发送请求之前可以再次添加数据
return queryString.stringify(data);
}],
transformResponse:[function(data){ //数组格式,用于处理返回的数据格式,data是后端发送回来的数据
data.abc = 'miaov' //对返回数据做进一步处理,请求此类地址的返回值都拥有abc这个属性,值是miaov
return data; //需要return出来
}],
cancelToken: source.token //主动取消请求
})
export default({
created(){
HTTP.get('test-axios')
.then((response)=>{
console.log(response.data)
})
.catch((error) =>{
console.log(error)
})
}
})
export default{
created(){
HTTP.post('postData#!method=post',{ //只是请求方式不一样
miaov:"ketang",
username:"leo"
})
.then( (response)=>{
console.log(response.data)
} )
.catch( (error)=>{
if (axios.isCancel(error)) { //被用户取消
console.log(error.message);
}else{ //发送请求超时
console.log(error)
}
} )
//手动、立即取消请求,走catch分支,添加这个,会走catch里面的if分支,不添加这个,如果出错会走else分支
source.cancel('操作被用户取消')
}
}
3、取消请求
//创建取消请求令牌
var cancelToken = axios.cancelToken;
var source = cancelToken.source()
//配置
cancelToken:source.token
//捕获取消错误
if( axios.isCancel(error) ){
console.log(error.message)
}
//调用取消
source.cancel('操作被用户取消')
4、并发请求
axios.all( iterable )
axios.spread( callback )
created(){
function http1(){
return HTTP.get("test-axios")
}
function http2(){
return HTTP.post("test-post-axios")
}
//两个请求同时请求成功才返回数据
axios.all([http1(),http2()]).then( (response)=>{
console.log(response); //返回的是一个数组,数组项是每个请求返回的结果,用下标去取每个请求的结果
} )
axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{ //用spread分割开2个请求返回的结果
console.log(res1) //第一个请求返回的结果
console.log(res2) //第二个请求返回的结果
}))
.catch((error) =>{
if (axios.isCancel(error)) {
console.log(error.message);
}else{
console.log(error)
}
})
}
5、拦截器:发送之前可以对请求进行拦截,还可以拦截响应,类似中间件,即将发送到发送之间做一些处理
全局拦截器
var HTTP = axios.create({ //自定义请求
baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
timeout: 1000,
responseType:'json',
headers:{
'custome-header': 'miaov',
'content-type':'application/x-www-form-urlencoded'
}
})
//拦截请求:请求之前的拦截
HTTP.interceptors.request.use(function(config){ //config就是自定义请求的配置信息,即HTTP的配置参数
//在发送请求之前做某事
console.log("拦截")
//这里可以对配置项config做处理,取消某些配置或增加
return config; //return config请求会继续进行,否则请求就被拦截了
},function(error){
//请求错误时做些事
return Promise.reject(error);
});
//拦截响应:请求之后 的拦截
HTTP.interceptors.response.use(function(data){
console.log("response")
console.log(data)
return data; //需要return data才能拿到数据,否则就是undefined
})
//取消拦截
HTTP.interceptors.request.eject( myInterceptor )
四、案例
<template>
<div class="hello">
{{ msg }}
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created(){
/*axios.get('https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList',{
params:{
name:'xiao',
age:'20'
}
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})*/
//发送给后端的数据附在url的?后面
//Request URL:https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList?name=xiao
axios.post('https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/postData',{
name:'xiao'
})
.then((response)=>{
console.log(response.data)
})
.catch((error)=>{
console.log(error)
})
}
}
////数据是隐藏的,悄悄发送,不会显示出来,放在Request Payload {name:'xiao'}
</script>
五、在vue中使用axios 全局注册,作为vue的插件使用
- 安装axios、vue-axios两个模块:
npm install axios vue-axios --save
- 作为插件,在main.js里面引入:
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)
- 在组件中使用,直接使用this.$http来使用
created(){
this.$http.get('https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList')
.then( (response)=>{
console.log(response.data)
} )
.catch( (error)=>{
console.log(error)
} )
}
axios安装 使用及如何解决‘axios is not defined
npm安装:npm install axios cdn安装:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
很多教程都是直接这样写的使用例子,
sendGet() {
axios.get('http://localhost:3000/info', {
// params:{
// name:'aa',
// age:22
// }
params: this.user
})
.then(resp => {
console.log(resp);
}).catch(err => {
console.log(err);
})
}
但是在运行的时候会报错,显示axios is not defined
解决办法
在main.js里写
import axios from 'axios';
Vue.prototype.$axios = axios;
然后将上述代码改成
sendGet() {
this.$axios.get('http://localhost:3000/info', {//这里将axios.get 改为this.$axios.get
// params:{
// name:'aa',
// age:22
// }
params: this.user
})
.then(resp => {
console.log(resp);
}).catch(err => {
console.log(err);
})
},
这样就避免了“axios is not defined”的错误~·