客户端与服务器、axios的使用、报文、拦截器、同源与跨域

一、客户端与服务器

1、客户端：就是指浏览器，在实际开发中，只要可以访问服务器的一端都是属于客户端（比如说手机、平板、电脑等等）

服务器：提供服务的设备就是服务器，主要是在上网过程中专门负责存放资源和对外提供服务

2、客服端与服务器通信过程分为 请求 - 响应两个步骤

请求就是 客户端通过网络去找服务器要资源的过程

响应就是 服务器把资源通过网络发送给客户端的过程

3、URL地址

协议：就是用来规范网络通讯中数据的格式，常见的有: http 和 https

域名(IP地址)：电脑主机网络中存放的位置  域名就是给IP地址起个名字，方便记忆

端口：电脑与外界通讯交流的出口，为数字类型，取值范围 0 - 65535之间  其中80为http专用

资源存放路径：资源存放路径就是资源在服务器中的具体存放地址

资源：服务器对外提供的内容 都属于是资源

二、axios的使用

全称： Asynchronous Javascript And XML

它是用来实现客户端网页请求服务器的数据

1、Ajax的五种请求方法

POST        向服务器 新增 数据

GET        从服务器 获取 数据

DELETE        删除 服务器上的数据

PUT        更新服务器的数据（侧重于完整更新；例如更新用户的完整信息）

PATCH        更新服务器的数据（侧重于部分更新；例如更新用户的手机号）

2、axios的GET请求

axios({
method:'请求的类型',
url:'请求的URL地址',
}).then((data)=>{
//.then 用来指定请求成功之后的回调函数
//形参的 result 是请求成功之后的结果
})

3、URL编码

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理

encodeURIComponent()    //输出对应的编码

decodeURIComponent()    //输出对应的字体

4、Ajax的解构赋值

axios({
method:'请求的类型',
url:'请求的URL地址',
}).then(({ data:res })=>{
//.then 用来指定请求成功之后的回调函数
//形参的 result 是请求成功之后的结果
console.log(res)
})

5、Ajax的POST请求

POST请求和GET请求不一样，POST请求一定会伴随着请求参数

axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3009/api/addbook',
data: {
bookname: '三体',
author: '刘慈欣',
publisher: '北京人民出版社'
}
}).then(({ data: res }) => {
  // 从 .then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
  console.log(res)
})

三、请求报文和响应报文

1、请求报文规定了客户端以什么格式把数据发送给服务器

请求报文 由 请求行 、请求头部 、空格 、请求体 4个部分组成

2、响应报文规定了服务器以什么格式把数据响应给客户端

响应报文 由 状态行、响应头部、空行、响应体 4个部分组成

3、在浏览器中 GET请求比较特殊 它只有请求头，没有请求体

四、Ajax拦截器

1、axios 请求拦截器

axios.interceptors.request.use(function (config){
//在发送请求之前做些什么
return config;
},function (error){
//对请求错误做些什么
return Promise.reject(error);
});

2、axios 响应拦截器

axios.interceptors.response.use(function (reponse) {
//对相应数据做点什么
return response;
},function (error) {
//对相应错误做点什么
return promise.reject(error);
});

五、同源与跨域

同源指的是两个 URL 地址具有相同的协议、主机名、端口号

跨域指的是两个 URL 地址的协议、主机名、端口号三者中有一个或多个不同

浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互

JSONP 是实现跨域数据请求的一种技术解决方案

它只支持 GET 请求，不支持 POST、DELETE 等其它请求
JSONP 不是真正的 Ajax 技术，在解决跨域问题时
JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术

最后

以上就是爱听歌方盒为你收集整理的客户端与服务器、axios的使用、报文、拦截器、同源与跨域的全部内容，希望文章能够帮你解决客户端与服务器、axios的使用、报文、拦截器、同源与跨域所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。