前后端交互

最新推荐文章于 2023-11-14 14:38:33 发布

丨小小风离丨

最新推荐文章于 2023-11-14 14:38:33 发布

阅读量68

点赞数 1

分类专栏：前端必备文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_27185691/article/details/127698257

版权

前端必备专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前后端交互模式

通过接口调用方式实现

调用方式有：

原生ajax
基于jQuery的ajax
fetch
axios

URL地址的区别

传统的 URL地址格式

传输协议://服务器IP或域名:端口/资源所在位置标识

schema://host:port/path?query#fragment
- schema：协议。例如：http、https、ftp等
- host：域名或者IP地址
- port：端口，http默认端口80，可以省略（到这的三个可以组成最简短的url）
- path：路径，例如/a/ab/aaa
- query：查询参数，例如 uname=list&age=12
- fragment：锚点（哈希Hash），用于定位页面的某个位置

Restful 形式的 URL

HTTP请求方式
- GET 查询
- POST 添加
- PUT 修改
- DELETE 删除

异步

JavaScript的执行环境是——单线程
所有的回调函数都是异步，定时器也是异步

异步模式可以一起执行多个任务
JS中常见的异步调用
- 定时任何（setTimeout()/setInterval() ）
- ajax
- 事件函数

Promis用法

ES6引入的一种语法，专门解决异步编程解决异步深层嵌套的问题
promise提供了简洁的API 使得异步操作更加容易

基本用法

使用new来构建一个Promise

Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

Promis常用API

实例方法

p.then() 得到异步任务的正确结果
p.catch() 获取异常信息
p.finally() 成功与否都会执行（目前2020不是正式标准）

对象、静态方法

Promise.all() 并发处理多个异步任务，所有任务都执行完才能得到结果
- Promise.all 方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个 promise，该项会被用** Promise.resolve** 转换为一个promise)。它的状态由这三个promise实例决定
promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果
- Promise.race 方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为 fulfilled 或 rejected ），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

<script type="text/javascript">
  Promise.all([p1,p2,p3]).then(result => {
    console.log(result)
  }
  Promise.race([p1,p2,p3]).then(result => {
    console.log(result)
  }            
</script>

接口调-fetch用法

fetch 就是 ajax+ Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多
fetch 默认是get请求

特性

Fetch API 是新的 ajax 解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）

text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据

<script type="text/javascript">
  // 第一个参数请求的路径 Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
  fetch('http://localhost:3000/fdata').then(function(data){
  	// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
  	return data.text();
  }).then(function(data){
  	// 在这个then里面我们能拿到最终的数据
  	console.log(data);
  })
</script>

fetch API 中的 HTTP 请求

method(String): HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默认的是 GET请求
- 需要在 options对象中指定对应的 method method: 请求使用的方法
- post和普通请求的时候需要在options中设置请求头 headers和 body

fetchAPI 中响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如 JSON， BLOB或者 TEXT等等

fetch('http://localhost:3000/json').then(function(data){
  // return data.json();  //直接获取得到json格式数据
  return data.text();
}).then(function(data){
  // console.log(data.uname)
  // console.log(typeof data)
  var obj = JSON.parse(data);
  console.log(obj.uname,obj.age,obj.gender)
})

接口调用-axios用法

专门的第三方库，更强大了。基于Promise用于浏览器和node.js的HTTP客户端
地址：链接

基于promise用于浏览器和node.js的http客户端
支持浏览器和 node.js 支持promise
能拦截请求和响应
自动转换JSON数据能转换请求和响应数据

<script>
  axios.get('http://localhost:3000/adata')
  .then(res => {
    // 注意data属性是固定的用法，用于获取后台的真实数据
    console.log(res.data)
  })
    .catch(err => {
    console.error(err);
  })
</script>

常用API

get：查询数据
post：添加数据
put：修改数据
delete：删除数据
- get和 delete请求传递参数
  - 通过传统的url以 ? 的形式传递参数
  - restful形式传递参数
  - 通过params形式传递参数
- post和 put请求传递参数
  - 通过选项传递参数（默认传递json格式的数据）
  - 通过 URLSearchParams传递参数

# 1. 发送get 请求
axios.get('http://localhost:3000/adata').then(function (ret) {
  # 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面
  // 注意data属性是固定的用法，用于获取后台的实际数据
  // console.log(ret.data)
  console.log(ret)
})
# 2. get 请求传递参数
# 2.1 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function (ret) {
  console.log(ret.data)
})
# 2.2 restful 形式传递参数
axios.get('http://localhost:3000/axios/123').then(function (ret) {
  console.log(ret.data)
})
# 2.3 通过params 形式传递参数
axios.get('http://localhost:3000/axios', {
  params: {
    id: 789
  }
}).then(function (ret) {
  console.log(ret.data)
})
#3 axios delete 请求传参 传参的形式和 get 请求一样
axios.delete('http://localhost:3000/axios', {
  params: {
    id: 111
  }
}).then(function (ret) {
  console.log(ret.data)
})
# 4 axios 的 post 请求
# 4.1 通过选项传递参数
axios.post('http://localhost:3000/axios', {
  uname: 'lisi',
  pwd: 123
}).then(function (ret) {
  console.log(ret.data)
})
# 4.2 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function (ret) {
  console.log(ret.data)
})
#5 axios put 请求传参 和 post 请求一样
axios.put('http://localhost:3000/axios/123', {
  uname: 'lisi',
  pwd: 123
}).then(function (ret) {
  console.log(ret.data)
})

axios 全局配置

axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = ‘http://localhost:3000’; //默认地址
axios.defaults.headers[‘mytoken’] = ‘aqwerqwerqwe23asder35’; //设置请求头

# 配置公共的请求头
axios.defaults.baseURL = 'https://api.example.com';
# 配置 超时时间
axios.defaults.timeout = 2500;
# 配置公共的请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

拦截器

请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
  - 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
  - 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

# 1. 请求拦截器
axios.interceptors.request.use(function (config) {
  console.log(config.url)
  # 1.1 任何请求都会经过这一步 在发送请求之前做些什么
  config.headers.mytoken = 'nihao';
  # 1.2 这里一定要return 否则配置不成功
  return config;
}, function (err) {
  #1.3 对请求错误做点什么
  console.log(err)
})
#2. 响应拦截器
axios.interceptors.response.use(function (res) {
  #2.1 在接收响应做些什么
  var data = res.data;
  return data;
}, function (err) {
  #2.2 对响应错误做点什么
  console.log(err)
})

接口调用-async/await用法

async/await 是ES7引入的新语法，可以更加方便的进行异步操作
async 关键字用于函数上（async函数的返回值是Promise实例对象）

await 关键字用于async函数当中（await可以得到异步的结果）

# 1. async 基础用法
# 1.1 async作为一个关键字放到函数前面
async function queryData() {
		# 1.2 await关键字只能在使用async定义的函数中使用 await后面可以直接跟一个 Promise实例对象
    var ret = await new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('nihao')
        }, 1000);
    })
    // console.log(ret.data)
    return ret;
}
# 1.3 任何一个async函数都会隐式返回一个promise 我们可以使用then 进行链式编程
queryData().then(function (data) {
    console.log(data)
})
#2. async 函数处理多个异步函数
axios.defaults.baseURL = 'http://localhost:3000';
async function queryData() {
		# 2.1 添加await之后 当前的await 返回结果之后才会执行后面的代码
    var info = await axios.get('async1');
		#2.2 让异步代码看起来、表现起来更像同步代码
    var ret = await axios.get('async2?info=' + info.data);
    return ret.data;
}
queryData().then(function (data) {
    console.log(data)
})