axios特性

拦截请求和响应可以在请求前及响应前做某些操作例如在请求前想要在这个请求头中加一些信息如授权信息等)。

转换请求数据和响应数据(例如在请求时一些敏感信息需要加密在返回数据时需要解密)

自动转换JSON数据(HTTP

请求时传输的数据都是字符串如果服务器端返回的数据不是字符串类型就需要使用JSON.parse()对它进行转换。

然后向后台发起数据请求会自动地进行转换不需要进行手动操作)。

客户端支持防御XSS攻击(XSS是客户端经常出现的一种攻击方式它发生在目标用户的浏览器层面上当渲染DOM树的过程中发生了不在预期范围内的JavaScript代码执行时就可以被判定为发生了XSS攻击)。

效果图

initial-scale1.0titleDocument/title

/head

srchttps://unpkg.com/vue3/dist/vue.global.js/script

style

srchttps://unpkg.com/axios/dist/axios.min.js/script

script//vue2写法//

thisaxios.get(https://autumnfish.cn/api/joke).***n(function

(res)

console.log(that.joke);that.joke

res.data}),function

{console.log(err);}//axios获取后端接口数据方法二//

axios({//

https://autumnfish.cn/api/joke//

}).***n(res

console.log(err)}},}).mount(#app)

/script/html

调用天气API接口官网地址免费天气API接口|天气预报接口|全球天气API接口|气象预警|空气质量

//htmla

classtem{{tem2}}{{tem1}}/a//jsgetWea***r()

{this.$axios.get(https://www.tianqiapi.com/api/?versionv1cityid101280601).***n(res

{//

res.data.data[0];//下标为0即表示当天天气数据console.log(res.data);

}).catch(err

总结由于这周太忙对于前端的学习投入的时间对于上周来说大幅度减少今天只有晚上留出来了一点时间学习了一下axios发送请求由于时间有限且自己没有后台代码因此只使用了网络上的接口测试了一下效果了解了一下理论并未实际去运用因为我主修java后期我会自己用java代码做后台用axios发请求来实现前端获取数据今天的学习就到这里