1.axios
官网:https://axios-http.com/zh/
CDN:https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
axios是一个请求库,在浏览器环境中,它封装了XHR,提供更加便捷的API发送请求
基本使用
// 发送 get 请求到 https://study.duyiedu.com/api/herolist,输出响应体的内容
axios.get("https://study.duyiedu.com/api/herolist").then(resp=>{
console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})
// 发送 get 请求到 https://study.duyiedu.com/api/user/exists?loginId=abc,输出响应体的内容
axios.get("https://study.duyiedu.com/api/user/exists", {
params: { // 这里可以配置 query,axios会自动将其进行Url编码
loginId: "abc"
},
}).then(resp=>{
console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})
// 发送 post 请求到 https://study.duyiedu.com/api/user/reg
// axios 会将第二个参数转换为JSON格式的请求体
axios.post("https://study.duyiedu.com/api/user/reg", {
loginId: 'abc',
loginPwd: '123123',
nickname: '棒棒鸡'
}).then(resp=>{
console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})
axios.get(url地址, [请求配置]);
axios.post(url地址, [请求体对象], [请求配置]);
// 或直接使用 axios 方法,在请求配置中填写请求方法
axios(请求配置);
实例
axios允许开发者先创建一个实例,后续通过使用实例进行请求
示例:
// 创建实例
const instance = axios.create({
baseURL: 'https://study.duyiedu.com/'
});
// 发送 get 请求到 https://study.duyiedu.com/api/herolist,输出响应体的内容
instance.get("/api/herolist").then(resp=>{
console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})
拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// config 为当前的请求配置
// 在发送请求之前做些什么
// 这里,我们添加一个请求头
const token = localStorage.getItem('token');
if(token){
config.headers.authorization = token;
}
return config; // 返回处理后的配置
});
// 添加响应拦截器
axios.interceptors.response.use(function (resp) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return resp.data.data; // 仅得到响应体中的data属性
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
alert(error.message); // 弹出错误消息
});
2.ajax
1、不管是客户端,还是服务器,它们都是一个应用程序,而不是一台计算机,客户端和服务器可以分布在不同的计算机上,也可以在同一个计算机上,并不需要特殊看待(比如我们之前接触的live server插件,就是一个服务器,它运行在本地的计算机上,大部分后段开发的就是服务器程序,前端的Node技术也能开发服务器程序)
2、客户端和服务端的这种交互模式称之为【经典c/s结构】,在这种结构中,如果客户端是浏览器,则我们称之为B/S结构
3、服务器程序往往是互联网产品提供服务,因此又称之为web服务器
4、一次完整的交互,总是从请求开始,响应结束
原文地址:https://blog.csdn.net/s8806479/article/details/134236232
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_41144.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。