1.认识Axios库Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中发送网络请求。 1.1 Axios的优点XMLHttpRequest,fetch是高级一点的原生 原生的缺点: 1.需要自己来封装原生。 2.原生某些功能不具备,你需要自己来完成请求拦截,响应拦截等。 3.js可以跑在浏览器和node上面,但是原生的fetch是不能工作在node中,node需要使用别的api。比如http模块来发送请求。 使用axios的优点 1.已经帮我们把原生的底层逻辑都封装了。 2.还额外增加了拦截器等功能 3.适配浏览器和node。axios已经帮我们封装好了,在在浏览器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求。不用担心在不同的平台使用不同的api 1.2 功能特点- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 等等
1.3 安装axios在项目中安装axios
npm install axios 2.发送常见的请求和配置axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])在main.js中 { console.log('res: ', res.data) })//request里面的参数中的method里面写get的话,就和axios.get一样了,method不写的话,默认是get//2.发送get请求(带参数有两种写法,第二种用的比较多)axios.get('http://123.207.32.32:9001/lyric?id=500665346').then((res) => { console.log('res: ', res.data)})axios .get('http://123.207.32.32:9001/lyric', { params: { id: 500665346 } }) .then((res) => { console.log('res: ', res.data) })//3.post 请求(2种方法)axios .post('http://123.207.32.32:1888/02_param/postjson', { name: 'why', age: 18, height: 1.88 }) .then((res) => { console.log('res: ', res.data) })//这种写法第二个 参数是data//4.post请求方法二,直接把第二个参数当作config, 把data写道config里面axios .post('http://123.207.32.32:1888/02_param/postjson', { data: { name: 'why', age: 18, height: 1.88 } }) .then((res) => { console.log('res: ', res.data) }) httpbin.org/get发送get 请求,httpbin.org/post发送post请求 用来做测试 3.常见的配置选项3.1baseURL { console.log('res: ', res.data)}) 3.2 axios.all◼ 有时候, 我们可能需求同时发送两个请求 - 使用axios.all, 可以放入多个请求的数组.
希望数据都有请求之后再拿到数据 - axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
{ console.log('res:', res) })
4.创建axios实例◼ 为什么要创建axios的实例呢? - 当我们从axios模块中导入对象时, 使用的实例是默认的实例;
- 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
- 但是后续开发中, 某些配置可能会不太一样;
- 比如某些请求需要使用特定的baseURL或者timeout等.
- 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
直接这么使用,这里axios也是一个实例,是axios默认库提供给我们的实例,实际项目种不使用这个实例来发送请求,所有的请求都是一样的设置。 { console.log('res: ', res.data) }) { console.log("res:", res.data)})const instance2 = axios.create({ baseURL: "http://123.207.32.32:8000", timeout: 10000, headers: {}})
5.请求和响应拦截器◼ axios的也可以设置拦截器:拦截每次请求和响应 axios.interceptors.request.use(请求成功拦截, 请求失败拦截) // fn1: 请求发送成功会执行的函数 // fn2: 请求发送失败会执行的函数 ◼ axios.interceptors.response.use(响应成功拦截, 响应失败拦截) // fn1: 数据响应成功(服务器正常的返回了数据 200或者200多,都是成功的状态) //fn2:服务器响应400+或者500+的时候调用这个函数 {//config是发送请求时候的参数,并且用完之后要给人家返回出去//用的时候可以做一些别的操作,比如改变config.url=XXX之类的,变换地址 console.log('请求成功拦截') // 1.开始loading的动画 // 2.对原来的配置进行一些修改 // 2.1. header // 2.2. 认证登录: token/cookie // 2.3. 请求参数进行某些转化 return config }, (err) => { console.log('请求失败拦截') return err })axios.interceptors.response.use( (res) => { console.log('响应成功的拦截') return res }, (err) => { console.log('服务器响应失败') return err })axios.interceptors.response.use( (res) => {////这个res是响应回来的数据 console.log('响应成功拦截') // 1.结束loading的动画 // 2.对数据进行转化, 再返回数据 return res.data }, (err) => { console.log('服务器响应失败') return err })axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then((res) => { console.log('res:', res)})
6.axios请求库封装(简洁版)在src文件夹里面创建service文件夹 与服务器沟通有关的文件放里面 创建index.js { return res.data; }); } get(config) { return this.request({ ...config, method: "get" }); } post(config) { return this.request({ ...config, method: "post" }); }}export default new HYRequest("http://123.207.32.32:9001"); main.js { console.log("res:", res); });hyRequest .get({ url: "/lyric", params: { id: 500665346, }, }) .then((res) => { console.log("res:", res); }); 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |