一, 简介
1,axios 是基于 Promise, 用于浏览器 (script 标签引入) 和 Node.JS 的, 与服务端进行通信的库
2, 特征:
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
3, 使用
CDN 地址:
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>
来源: http://www.bubuko.com/infodetail-2888590.html