• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Vue3撩课学院笔记09-axios简介,发起get请求的两种方式,发起带参的get和post请求,发起并发请求,并发请求结果数组展开,axios全局配置,axios配置和封装,请求和响应拦截

武飞扬头像
心湖中的石子
帮助1

1、axios简介

axios是基于promise可以用于浏览器和node.js的网络请求库,在服务器端使用原生node.js,在浏览气短使用ajax(即XMLHttpRequests)

2、axios发起get请求

撩课提供的api接口地址:
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      //发起get请求
      axios.get('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001').then((res)=>{
          console.log(res.data)
        }
      ).catch((err)=>{
        console.log(err)
      })
    }

    return {
      getReq,
    }
  }
}
</script>

<style>
/*引入样式*/

</style>

学新通

3、axios发起get请求的第二种方法

使用axios进行封装

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      axios({
        method:'get',
	url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',

      }).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })
    }

    return {
      getReq,
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
学新通

4、axios发起带参数的get请求,及带参的post请求

要看注释

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
    <h1>axios-发起post请求</h1>
    <button @click="postReq()">发起get请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    const getReq=()=>{
      //发起get请求
      axios.get(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          params: {
            id:'lk001',
            name:'like',
            age:10
          }
        }
      ).then((res)=>{
          console.log(res.data)
        }
      ).catch((err)=>{
        console.log(err)
      })

      // axios({
      //   method:'get',
      //   url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
      //   //传入参数
      //     params:{
      //       id:'lk001',
      //       name:'like',
      //       age:10
      //     }
      //
      // }).then((res)=>{
      //   console.log(res.data)
      // }).catch((err)=>{
      //   console.log(err)
      // })
    }
    const postReq=()=>{
      //发起post请求
      // axios.post(
      //   'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
      //   {//post请求的参数使用data
      //     data: {
      //       id:'lk001',
      //       name:'like',
      //       age:10
      //     }
      //   }
      // ).then((res)=>{
      //     console.log(res.data)
      //   }
      // ).catch((err)=>{
      //   console.log(err)
      // })

      //使用post请求传参
      axios({
        method:'post',
        url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        //传入参数,post请求使用data
          data:{
            id:'lk001',
            name:'like',
            age:10
          }

      }).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }
    return {
      getReq,
      postReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
学新通

5、axios.all发起并发请求

使用axios.all发起并发请求,并通过axios.spread将数组的值展开
测试api接口,共两个
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001
http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002

请求是放在数组里的

<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){

    const allReq=()=>{
    //请求是放在数组里的
      axios.all([
        //get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002'}),
      ]).then((res)=>{
        console.log(res)
      }).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
学新通

6、axios.all发起并发请求并通过axios.spread将数组的值展开

<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){

    const allReq=()=>{
      axios.all([
        //get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002'}),
      ]).then(//使用axios.spread展开结果集数组,spread里的回调函数里面有两个参数
          axios.spread((res1,res2)=>{
            console.log(res1.data)
            console.log(res2.data)
          })
      ).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>
学新通

7、axios配置

<template>
  <div>
    <h1>axios-发起并发请求</h1>
    <button @click="allReq()">发起并发请求</button>
  </div>
</template>

<script >
  import axios from  'axios'
export  default {
  setup(){
    //axios的全局配置
    axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
    axios.defaults.timeout=5000//毫秒
    const allReq=()=>{
      axios.all([
        //get请求
        axios({url:'homeApi/categoriesdetail/lk001'}),
        //另一个get请求
        axios({url:'homeApi/categoriesdetail/lk002'}),
      ]).then(//使用axios.spread展开结果集数组,spread里的回调函数里面有两个参数
          axios.spread((res1,res2)=>{
            console.log(res1.data)
            console.log(res2.data)
          })
      ).catch((err)=>{
        console.log(err)
      })
    }
    return {
      allReq
    }
  }
}
</script>

<style>
/*引入样式*/

</style>

学新通

8、axios封装

创建封装文件:src/http/index.js
src/http/index.js

import axios from 'axios'
//axios的全局配置
axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
axios.defaults.timeout=5000//毫秒
//包装一个函数
export  default function ajax(url='',params={},type='get') {
  return new Promise((resolve,reject)=>{//promise已经调用立即执行
    //1、创建一个变量
    let promise
    //2、判断请求类型
    if (type.toUpperCase()==='GET'){//如果是get请求
      promise=axios({
        url,
        params,
      })
    }else if(type.toUpperCase()==='POST'){//如果是post请求
      promise=axios({
        url,
        data:params,
        method:'POST',
      })
    }

    //3、处理返回
    promise.then((res)=>{
      resolve(res)
    }).catch((err)=>{
      reject(err)
    })
  })
}

学新通

App.vue

<template>
  <div>
    <h1>axios-发起get请求</h1>
    <button @click="getReq()">发起get请求</button>
    <h1>axios-发起带参get请求</h1>
    <button @click="getReqParam()">发起带参get请求</button>
    <h1>axios-发起post请求</h1>
    <button @click="postReq()">发起post带参请求</button>
    <h1>axios-发起并发请求</h1>
    <button @click="postReqall()">发起并发请求</button>
  </div>
</template>

<script >
import ajax from  './http/index.js'
export  default {
  setup(){
    //发起get请求
    const getReq=()=>{
      ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001').then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }
    const getReqParam=()=>{
      //发起带参get请求
      ajax(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          id:'lk001',
          name:'like',
          age:10
        }
      ).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })
    }

    //使用post请求传参
    const postReq=()=>{
      ajax(
        'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
        {
          id:'lk001',
          name:'like',
          age:10
        },
        'POST'
      ).then((res)=>{
        console.log(res.data)
      }).catch((err)=>{
        console.log(err)
      })

    }

    const postReqall=()=>{
      Promise.all([
        ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001'),
        ajax('http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk002')
      ]).then((res)=>{
        console.log(res)
      })

    }

    return {
      getReq,
      getReqParam,
      postReq,
      postReqall
    }

  }
}
</script>

<style>
/*引入样式*/

</style>

学新通

9、请求和响应拦截

在src/http/index.js封装文件上添加请求和响应拦截配置

import axios from 'axios'
//axios的全局配置
axios.defaults.baseURL='http://demo.itlike.com/web/xlmc/api/'
axios.defaults.timeout=5000//毫秒

//请求拦截
//axios配置拦截
axios.interceptors.request.use(
  //拦截成功
  (config)=>{
    //在请求中添加一些数据
    config.abc='hello world'
    //console.log(config)
  //如果不拦截,就要再返回出去这个config
    return config
  },
  //拦截失败
  (err)=>{
    return Promise.error(err)
  }
)

//响应拦截
//axios配置拦截
axios.interceptors.response.use(
  //拦截成功
  (response)=>{
    console.log(response)
    //如果不拦截,就要再返回出去这个config
    return response.data
  },
  //拦截失败
  (err)=>{
    return Promise.error(err)
  }
)


//包装一个函数
export  default function ajax(url='',params={},type='get') {
  return new Promise((resolve,reject)=>{//promise已经调用立即执行
    //1、创建一个变量
    let promise
    //2、判断请求类型
    if (type.toUpperCase()==='GET'){//如果是get请求
      promise=axios({
        url,
        params,
      })
    }else if(type.toUpperCase()==='POST'){//如果是post请求
      promise=axios({
        url,
        data:params,
        method:'POST',
      })
    }

    //3、处理返回
    promise.then((res)=>{
      resolve(res)
    }).catch((err)=>{
      reject(err)
    })
  })
}

学新通

这篇好文章是转载于:编程之路

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 编程之路
  • 本文地址: /boutique/detail/tanhhfeeig
系列文章
更多 icon
同类精品
更多 icon
继续加载