Axios通过mock模拟数据进行通信的几种方式

本篇主要讲解vue axios通过mock模拟数据进行通信的几种形式，罗列了部分关键代码，仅供参考。

第一步：import axiosfrom'axios'

引入axios没有安装的通过npm install axios进行安装

第二步：通过axios进行数据的获取，一般常用的是get和post方法，这里以get方法为例,post方法同理。

一、基本写法：

import axios from 'axios'export default {  created(){    axios({      method:'get',      url:'http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1/test-axios'    })      .then((response)=>{        console.log(response.data)      })      .catch((error)=>{        console.log(error)      })  }}

二、简写方法：

axios.get('http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1/test-axios',{  params:{//传递的数据  以字符串的形式写在url后面    abc:'get11',  }})  .then((response)=>{  console.log('简写形式')   console.log(response.data);  })  .catch((error)=>{  console.log(error)  })

此处的params是需要传递的参数，在此是可选项可以不写，其运行结果如下：

Post传参形式：

axios.post('http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1/post/axios',{  //传参  name:'nice'})  .then((response)=>{    console.log('简写形式')    console.log(response.data);  })  .catch((error)=>{    console.log(error)  })

运行结果如下：

三、通过配置一些基本项简化操作进行获取数据

//引入axios 没有安装的通过npm install axios进行安装import axios from 'axios'//通过配置一些基本项简化操作var HTTP=axios.create({//baseURL   URL全部大写  baseURL:'http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1',  timeout:1000,//超时设置   单位是毫秒  1s  responseType:'json',//设置数据类型为json  params:{//查询字符串  这种形式会放在地址栏url后面    book:123  },  headers:{//设置请求头    'custome-header':'header',  }})//在created里，通过HTTP进行请求：HTTP.get('test-axios')  .then((response)=>{    console.log(response.data)  })  .catch((error)=>{    console.log(error)  })

通过配置一些基本参数可简化操作过程。

四、将axios作为插件引入

  第一步：安装  npm install vue-axios --save

  第二步：在main.js引入

   import Axios from 'axios'

   import VueAxios from 'vue-axios'

  第三步：在main.js中作为插件

         Vue.use(VueAxios,Axios)

设置为全局之后每次获取数据的时候，就都可以直接这样写：

this.$http.get('http://easy-mock.com/mock/59bb998de0dc663341abbf37/http:/easy-mock.com/new/example/1/test-axios')    .then((response)=>{     console.log(response)    })  .catch((error)=>{     console.log('123')    console.log(error)  })