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

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

心湖中的石子

1450人浏览 · 2021-09-04 15:58:31

心湖中的石子 · 2021-09-04 15:58:31 发布

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