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-dev
二、使用
1、在需要的模块中引入使用:
import axios from ‘axios‘
2、语法:
- axios( config )
- axios[ method ]()
- 返回值为promise,意味着可以接着在后面使用then捕获到成功,catch捕获到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、axios在created(){}里面使用,写在具体组件内,比如table.vue
5、通过get方式向后端发送数据,数据是写在地址栏?后面的
三、案例
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</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>