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><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请求使用datadata:{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)//如果不拦截，就要再返回出去这个configreturn config},//拦截失败(err)=>{return Promise.error(err)}
)//响应拦截
//axios配置拦截
axios.interceptors.response.use(//拦截成功(response)=>{console.log(response)//如果不拦截，就要再返回出去这个configreturn 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)})})
}

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

[js] axios为什么可以使用对象和函数两种方式调用？是如何实现的？
[js] axios为什么可以使用对象和函数两种方式调用?是如何实现的? axios 源码初始化看源码第一步,先看package.json.一般都会申明 main 主入口文件. // packag ...
JavaScript实现同步Ajax请求的两种方式
JavaScript的Ajax请求默认是异步的,有以下两种方式能让Ajax请求变成同步方式一使用ES7的Async和Await async function main(){const env = ...
探讨Netty获取并检查Websocket握手请求的两种方式
在使用Netty开发Websocket服务时,通常需要解析来自客户端请求的URL.Headers等等相关内容,并做相关检查或处理.本文将讨论两种实现方法. 方法一:基于HandshakeComplet ...
spring依赖注入简介以及依赖注入的两种方式
1.spring依赖注入简介依赖注入:Set注入1.依赖:bean对象创建依赖于容器!2.注入:bean对象中的所有属性,由容器来注入! 2.依赖注入的两种方式实体类: package com ...
java发送http get请求的两种方式
长话短说,废话不说一.第一种方式,通过HttpClient方式,代码如下: public static String httpGet(String url, String charset)throw ...
STM32F103学习笔记（1）——stlink和miniusb下载两种方式
毕业后干了3个月JAVA的CV工程师,感觉后面都是学习框架知识.为了进一步学习计算机底层知识,现在成为一名光荣的点灯工程师. 在公司学习了三周stm32相关知识.公司前同事的代码用的是原子14年的代码 ...
.Net Core下发送WebRequest请求的两种方式
1.使用RestSharp.NetCore 2.使用WebApi请求方式转载于:https://www.cnblogs.com/mailaidedt/p/6525501.html
php 进行http请求,php模拟http请求的两种方式
方法一:CURL $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_CONNECTTIM ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...