axios教程

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