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)
  })