一、简介 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”的错误~·