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

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

第一步:import axiosfrom'axios'

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

第二步:通过axios进行数据的获取,一般常用的是getpost方法,这里以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是需要传递的参数,在此是可选项可以不写,其运行结果如下:

Axios通过mock模拟数据进行通信的几种方式_第1张图片

Axios通过mock模拟数据进行通信的几种方式_第2张图片

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通过mock模拟数据进行通信的几种方式_第3张图片

Axios通过mock模拟数据进行通信的几种方式_第4张图片

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

//引入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)
  })



你可能感兴趣的:(Vue,Vue.JS)