axios教程

最新推荐文章于 2024-04-10 11:14:39 发布

weixin_34411563

最新推荐文章于 2024-04-10 11:14:39 发布

阅读量144

点赞数

文章标签：后端 javascript json ViewUI

原文链接：http://blog.51cto.com/9161018/2331694

版权

一、简介
1、axios是基于Promise，用于浏览器(script标签引入)和nodejs的，与服务端进行通信的库
2、特征：

支持Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换为JSON数据
3、使用
CDN地址：https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
Node：npm install axios --save

二、使用
1、在需要的模块中引入使用：
import axios from 'axios'

2、语法：

axios( config )
axios[ method ]()
返回值为promise，意味着可以接着在后面使用then捕获到成功，catch捕获到error(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、在具体组件内，比如table.vue，axios在created(){}里面使用，

5、 axios教程

6、默认请求格式：

axios({
    method: 'post',
    url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios'
})
    .then((response)=>{
            console.log(response.data)
    })
    .catch((error)=>{
            console.log(error)
    })

7、get发送请求，通过get方式向后端发送数据，数据是写在地址栏?后面的

axios.get('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-get-axios',{
    params:{  //这个是发送给后端的参数，需要有params作为key值
        key1:'xx',
        key2:'yy'
    }
})
    .then((response)=>{
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error)
    })

8、post方式发送请求，数据是悄悄的发送的，附加在请求头里面的

axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{
    miaov:"课堂"  //不需要params作为key值了
})
    .then((response)=>{
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error)
    })

三、自定义请求实例

1、创建
axios.create( config )
2、配置
{
    baseURL:'',
    timeout:1000,
    headers:{},
    responseType:'json',
    params:{},
    transformRequest:[],  只适合PUT、POST和、PATCH
    transformResponse:[],
    validateStatus:function(){},  //验证状态码在哪个范围是成功，哪个范围是失败
    cancelToken
}

demo：
hi.vue组件

import axios from 'axios';
import queryString from 'queryString'

//创建取消请求令牌
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

//可以把这个HTTP写在某一个单独的组件内，也可以提取出来放在一个js文件内，
//然后export default HTTP，在其他组件内，通过import这个js文件进行使用
var HTTP = axios.create({
    baseURL:'https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/'   //基本url都一样
    timeout:1000        //单位是ms，请求超过这个时间就取消，即请求超时
    responseType:'json',  //后端返回的数据类型
    header:{  //自定义请求头
        'custom-header':'xiao',  //Request Headers里面就多了一个custom-header:xiao，后端可以拿到这个数据
        'content-type':'application/x-www-form-urlencoded'  //设置这个，那么经过transformRequest处理之后的数据格式就变为了  miaov=ketang&username=leo，只支持POST请求方式
    },
    params:{  //查询字符串，传给后端的数据，不管是get还是post请求，这条数据都会附在url后面，发送给后端
        bookId:'123'
    },
    transformRequest:[function(data){  //数组格式，用于转换发送数据格式，只适合PUT、POST、PATCH，data是传递给后端的数据，transformRequest类似一个中间件，发送数据，经过它来转换，需要reture出来，否则就是undefined，但是不能直接是return data，因为这样返回的是[object object]，
安装queryString来处理查询字符串，格式化成一个字符串
      data.age = 30;  //发送请求之前可以再次添加数据
      return queryString.stringify(data);  
    }],
    transformResponse:[function(data){   //数组格式，用于处理返回的数据格式，data是后端发送回来的数据
      data.abc = 'miaov'  //对返回数据做进一步处理，请求此类地址的返回值都拥有abc这个属性，值是miaov
      return data;  //需要return出来
    }],
    cancelToken: source.token  //主动取消请求
})

export default({
    created(){
      HTTP.get('test-axios')
      .then((response)=>{
            console.log(response.data)
        })
      .catch((error) =>{
        console.log(error)
    })

  }
})

export default{
    created(){
        HTTP.post('postData#!method=post',{   //只是请求方式不一样
                miaov:"ketang", 
        username:"leo"
        }) 
        .then( (response)=>{
            console.log(response.data)
        } )
        .catch( (error)=>{
            if (axios.isCancel(error)) {  //被用户取消
          console.log(error.message);
        }else{  //发送请求超时
            console.log(error)
        }
        } )

        //手动、立即取消请求，走catch分支，添加这个，会走catch里面的if分支，不添加这个，如果出错会走else分支
        source.cancel('操作被用户取消')
    }
}

3、取消请求
//创建取消请求令牌
var cancelToken = axios.cancelToken;
var source = cancelToken.source()
//配置
cancelToken:source.token
//捕获取消错误
if( axios.isCancel(error) ){
    console.log(error.message)
}
//调用取消
source.cancel('操作被用户取消')

4、并发请求
axios.all( iterable )
axios.spread( callback )

created(){
    function http1(){
      return HTTP.get("test-axios")
    }
    function http2(){
      return HTTP.post("test-post-axios")
    }

        //两个请求同时请求成功才返回数据
        axios.all([http1(),http2()]).then( (response)=>{
            console.log(response);  //返回的是一个数组，数组项是每个请求返回的结果，用下标去取每个请求的结果
        } )

        axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{ //用spread分割开2个请求返回的结果
                console.log(res1)  //第一个请求返回的结果
                console.log(res2) //第二个请求返回的结果
        }))
        .catch((error) =>{
            if (axios.isCancel(error)) {
                console.log(error.message);
            }else{
                    console.log(error)
            }
    })
}

5、拦截器：发送之前可以对请求进行拦截，还可以拦截响应，类似中间件，即将发送到发送之间做一些处理
全局拦截器

var HTTP = axios.create({  //自定义请求
    baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
    timeout: 1000,
    responseType:'json',
    headers:{
        'custome-header': 'miaov',
        'content-type':'application/x-www-form-urlencoded'
    }
})

//拦截请求：请求之前的拦截
HTTP.interceptors.request.use(function(config){  //config就是自定义请求的配置信息，即HTTP的配置参数
    //在发送请求之前做某事
    console.log("拦截")
    //这里可以对配置项config做处理，取消某些配置或增加
    return config;  //return config请求会继续进行，否则请求就被拦截了
},function(error){
    //请求错误时做些事
    return Promise.reject(error);
});

//拦截响应：请求之后 的拦截
HTTP.interceptors.response.use(function(data){
        console.log("response")
        console.log(data)
        return data;  //需要return data才能拿到数据，否则就是undefined
})

//取消拦截
HTTP.interceptors.request.eject( myInterceptor )

四、案例

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

五、在vue中使用axios
全局注册，作为vue的插件使用

安装axios、vue-axios两个模块：
npm install axios vue-axios --save

作为插件，在main.js里面引入：

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)

在组件中使用，直接使用this.$http来使用

created(){
this.$http.get('https://www.easy-mock.com/mock/5c1767c06ccaa7461ef01ee9/example/dataList')
.then( (response)=>{
    console.log(response.data)
} )
.catch( (error)=>{
    console.log(error)
} )
}

转载于:https://blog.51cto.com/9161018/2331694

weixin_34411563

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios教程

一、简介1、axios是基于Promise，用于浏览器(script标签引入)和nodejs的，与服务端进行通信的库2、特征：支持Promise API拦截请求和响应转换请求和响应数据取消请求自动转换为JSON数据3、使用CDN地址：https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.jsNode：npm install ax...
复制链接

扫一扫