vue之axios使用

责编:menVScode 2017-12-17 23:01 阅读(2641)

axios简介

        基于 Promise,用于浏览器和 nodejs 的与服务器端通信库。

axios特性

        1. 支持 Promise API

        2. 拦截请求和响应

        3. 转换请求和响应数据

        4. 取消请求

        5. 自动转换JSON数据

axios使用

npm install axios --save

        需要的模块引入axios

import axios from 'axios'

        语法

1. axios( config )
2. axios[ method ]()
3. 返回值为 promise

        支持的请求方式

axios.get( url[,config] )
axios.post( url[,data[, config]] )
axios.delete( url[,config] )
axios.head( url[,config] )
axios.option( url[,config] )
axios.put( url[, data[,config]] )
axios.patch( url[,data[,config]] )


        axios( config )

import axios from 'axios'
export default {
  name: 'app',
  created(){
    axios({
      // method:'get',//不写method默认是get请求
      // url:'https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate',
      method:'post',
      url:'https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/upload',
    }).then((response)=>{
      console.log(response.data.data)
    }).catch((error)=>{
      console.log(error)
    })
  }
}

        axios.get( url[,config] )

import axios from 'axios'
export default {
  name: 'app',
  created(){
    axios.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate')
      .then((res)=>{
        console.log(res.data.data)
      })
      .catch((err)=>{
        console.log(err)
      })
  }
}

        axios.get()方式传递参数

axios.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate',{
      params:{
        name:'menvscode.com'
      }
    })
      .then((res)=>{
        console.log(res.data.data)
      })
      .catch((err)=>{
        console.log(err)
      })

        axios.post()方式传递参数

axios.post('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/upload',{
      name:'menvscode.com'
    })
      .then((res)=>{
        console.log(res.data.data)
      })
      .catch((err)=>{
        console.log(err)
      })

       

自定义请求示例

        一个页面可能请求多个接口,每次请求一个就要配置一遍。现在可以统一配置,请求一次就可以了。

        创建:axios.create( config )

        配置:

{
    baseURL:'',
    timeout:1000, //连接超时,超过一秒的时候终止发送
    headers:'', //设置请求头
    responseType:'json',
    params:{},
    transformRequest:[], //只适合 put、post、patch 转换请求数据
    transformResponse:[], //处理请求回来的数据
    validateStatus:function(){},
    cancelToken
}

        demo1:

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition> 
  </div>
</template>

<script>
import axios from 'axios'
import axiosCreate from '@/components/axiosCreate'

var HTTP = axios.create({
      baseURL:' https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/',
      timeout:1000,
      responseType:'json',//返回的数据类型
      headers:{
        'custome':'menvscode.com'
      },
      params:{
        name:'MVC前端网'
      }
  })

export default {
  name: 'app',
  created(){
    HTTP.get('selectDate')
      .then((response)=>{
          console.log(response)
      })
      .catch((err)=>{
          console.log(err)
      })
      
  }
}
</script>

        demo2:转换请求数据配置 transformRequest:[]

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition>  
  </div>
</template>

<script>
import axios from 'axios'
import queryString from 'queryString'

var HTTP = axios.create({
      baseURL:' https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/',
      timeout:1000,
      responseType:'json',//返回的数据类型
      headers:{
        'custome':'menvscode.com',
        'content-type':'application/x-www-form-urlencode'
      },
      transformRequest:[function(data){ //data是传给后端的数据
        console.log(data) // {name:'lily',age:18}
        //要将其转换为name=lily&age=18,需要设置在header配置'content-type':'application/x-www-form-urlencode',转换queryString.stringify(data)
        return queryString.stringify(data)
      }],
      transformResponse:[function(data){ //后端发送过来的数据
      console.log('transformResponse')
        console.log(data)
        return data
      }],
      validateStatus:function(status){//参数是状态码
        console.log(status) //控制状态码在那个区域是成功/失败的
        return status<400
      }
  })

export default {
  name: 'app',
  created(){
    HTTP.post('test-post',{
      name:'lily',
      age:18
    })
      .then((response)=>{
          console.log(response)
      })
      .catch((err)=>{
          console.log(err)
      })
      
  }
}
</script>


        取消请求:可能发送之前就把请求取消了,可能发送的时间太长了就把请求取消了;通过按钮点击取消请求。

创建取消请求令牌

var CancelToken = axios.CancelToken
var source = CancelToken.source()

配置

cancelToken:source.token

捕获取消错误

if( axios.isCancel(error) ){
  console.log( error.message )
}

调用取消

source.cancel( '操作被用户取消' )

demo代码

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition>  
  </div>
</template>

<script>
import axios from 'axios'
import queryString from 'queryString'

var CancelToken = axios.CancelToken
var source = CancelToken.source()

var HTTP = axios.create({
      baseURL:' https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/',
      timeout:1000,
      responseType:'json',//返回的数据类型
      headers:{
        'custome':'menvscode.com',
        'content-type':'application/x-www-form-urlencode'
      },
      transformRequest:[function(data){ //data是传给后端的数据
        //console.log(data) // {name:'lily',age:18}
        //要将其转换为name=lily&age=18,需要设置在header配置'content-type':'application/x-www-form-urlencode',转换queryString.stringify(data)
        return queryString.stringify(data)
      }],
      transformResponse:[function(data){ //后端发送过来的数据
        console.log('transformResponse')
        console.log(data)
        return data
      }],
      cancelToken:source.token
  })
export default {
  name: 'app',
  created(){
    HTTP.post('test-post',{
      name:'lily',
      age:18
    })
      .then((response)=>{
          console.log(response)
      })
      .catch((error)=>{
          if( axios.isCancel(error) ){
            console.log( error.message )
          }else{
            console.log(error)
          }
      })
    source.cancel( '操作被用户取消,因为时间太长了!' )
      
  }
}
</script>


        并发请求:每次只发送一次请求,如果有两个请求都要同时发送,发送完之后同时回来才算成功。

axios.all( iterable )
axios.spread( callback )

        demo代码

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition>  
  </div>
</template>

<script>
import axios from 'axios'
import queryString from 'queryString'

var CancelToken = axios.CancelToken
var source = CancelToken.source()

var HTTP = axios.create({
      baseURL:' https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/',
      timeout:1000,
      responseType:'json',//返回的数据类型
      headers:{
        'custome':'menvscode.com',
        'content-type':'application/x-www-form-urlencode'
      },
      transformRequest:[function(data){ //data是传给后端的数据
        //console.log(data) // {name:'lily',age:18}
        //要将其转换为name=lily&age=18,需要设置在header配置'content-type':'application/x-www-form-urlencode',转换queryString.stringify(data)
        return queryString.stringify(data)
      }],
      transformResponse:[function(data){ //后端发送过来的数据
        console.log('transformResponse')
        console.log(data)
        return data
      }],
      cancelToken:source.token
  })

export default {
  name: 'app',
  created(){
    function http1(){
      return HTTP.get('selectDate')
    }
    function http2(){
      return HTTP.post('test-post')
    }
    
    axios.all([http1(),http2()]).then((response)=>{
          console.log(response) //返回的是数组,里面存着2个请求回来的数据
      })
      .catch((error)=>{
          if( axios.isCancel(error) ){
            console.log( error.message )
          }else{
            console.log(error)
          }
      })
      
  }
}
</script>

        可以通过 axios.spread( callback ) 对 axios.all( iterable ) 获取的数据进行分割处理,将上面代码修改部分

axios.all([http1(),http2()]).then( axios.spread((res1,res2)=>{ //spread参数分别对应all里面的参数
    console.log(res1)
    console.log(res2)
}))
.catch((error)=>{
    if( axios.isCancel(error) ){
      console.log( error.message )
    }else{
      console.log(error)
    }
})


        拦截器:在发送之前,可以对请求进行拦截,还可以对响应进行拦截。

        全局拦截器

                拦截请求

axios.interceptors.request.use( function( config ){
  //在发送请求之前做某事
  return config
},function(){
  //请求错误时做些事
  return Promise.reject( error )
} )

               拦截响应

axios.interceptors.response.use()

        取消拦截

axios.interceptors.request.eject( myInterceptor )

        demo代码

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition>  
  </div>
</template>

<script>
import axios from 'axios'
import queryString from 'queryString'

var HTTP = axios.create({
      baseURL:' https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/',
      timeout:1000,
      responseType:'json',//返回的数据类型
      headers:{
        'custome':'menvscode.com',
        'content-type':'application/x-www-form-urlencode'
      },
      transformRequest:[function(data){ //data是传给后端的数据
        //console.log(data) // {name:'lily',age:18}
        //要将其转换为name=lily&age=18,需要设置在header配置'content-type':'application/x-www-form-urlencode',转换queryString.stringify(data)
        return queryString.stringify(data)
      }],
      transformResponse:[function(data){ //后端发送过来的数据
        console.log('transformResponse')
        console.log(data)
        return data
      }]
  })

HTTP.interceptors.request.use( function( config ){ //参数是配置项
  //在发送请求之前做某事
  console.log('拦截')
  console.log(config)
  return config//不return就拦截了
},function(){
  //请求错误时做些事
  return Promise.reject( error )
})

HTTP.interceptors.response.use(function(data){ //参数是响应回来的数据
  console.log('响应') // 拦截的目的是对数据进行操作
  console.log(data)
  return data //不return后面获取不到数据
})

export default {
  name: 'app',
  created(){
    function http1(){
      return HTTP.get('selectDate')
    }
    function http2(){
      return HTTP.post('test-post')
    }
    
    axios.all([http1(),http2()]).then( axios.spread((res1,res2)=>{
      console.log(res1)
      console.log(res2)
    }))
      .catch((error)=>{
          console.log(error)
      })
  }
}
</script>

        

        axios在vue中使用

        安装

npm install axios vue-axios --save

        作为插件

Vue.use( VueAxios,Axios )

        在组件中使用

this.$http[method]()

        demo代码

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view> 
    </transition>  
  </div>
</template>

<script>
export default {
  name: 'app',
  created(){
    this.$http.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate')
      .then((res)=>{
        console.log(res)
      })
      .catch((error)=>{
          console.log(error)
      })
  }
}
</script>

        main.js

import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import router from './router'

import VueAxios from 'vue-axios'
import Axios from 'axios'

Vue.use(VueAxios,Axios)

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})
标签: axios vue vue-axios
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码