Vue.js（五）

Z时代
2024-01-10
分类：综合

vue

前后端交互概述与URL地址格式

JS中常见的异步调用：定时任务 ajax 事件函数接口调用方式：原生ajax 基于jQuery的ajax fetch axios url 地址格式：传统的url Restful形式的url

Promise（主要解决异步操作深层调用的问题）

Promise的作用：把回调函数代码分离出来，在异步操作执行完后，用链式调用的方法执行回调函数。 Promise有三种状态： pending（进行中），resolved（完成），rejected（失败）。只有异步返回的结构可以改变其状态。 promise 的过程一般只有两种： pending->resolved pending->rejected promise 对象还有一个比较常用的then方法，用来执行回调函数： then 方法接受两个参数，第一个是成功的 resolved 的回调，另一个是失败 rejected 的回调，第二个失败的回调参数可选。并且 then 方法里也可以返回 promise 对象，这样就可以链式调用了。

Promise api（ES6）

　　1、Promise.resolve()
　　2、Promise.reject()
　　3、Promise.prototype.then()    //串行执行任务（不论成功或失败都会被调用）
　　4、Promise.prototype.catch()    //reject只会将参数传递给catch方法
　　5、Promise.all()    //所有的都有完成，相当于“且”，返回结果数组（并行执行任务）
　　6、Promise.race()    //完成一个即可，相当于“或”

基本使用

<script type="text/javascript">
  /**
   * 基于Promise发送 原生Ajax请求
   */
  function queryData(url) {
    var p = new Promise(function (resolve, reject) {
      //获取对象
      var xhr = new XMLHttpRequest();
      //回调函数
      xhr.onreadystatechange = function () {
        if (xhr.readyState != 4) return;
        if (xhr.readyState == 4 && xhr.status == 200) {
          //处理正常的情况：一旦调用 resolver 就会调用下一步的 then
          resolve(xhr.responseText);
        } else {
          //处理异常情况
          reject('服务器错误');
        }
      };
      //获取连接
      xhr.open('get', url);
      //发送请求
      xhr.send(null);
    });
    return p;
  }
  //发送多个Ajax请求并且保证顺序
  queryData('http://localhost:3000/data')
    .then(function (data) {
      console.log(data)
      return queryData('http://localhost:3000/data1');
    })
    .then(function (data) {
      console.log(data);
      return queryData('http://localhost:3000/data2');
    })
    .then(function (data) {
      console.log(data)
    });
</script>

promise 链式调用时 then 的返回值

then 方法里接受两个函数作为参数，分别是 resolve 和 reject 后执行的回调。
他返回的是一个新的 Promise 实例（不是原来那个 Promise 实例）。
return 值（无return的情况下就返回undefined，也是返回值）：
	在后面的then中就可以接收到数据了。
throw error：
	返回的 Promise 会成为Rejected（已失败）的状态，下一步执行catch中的回调函数或者then的第二个回调函数参数。
	catch为then的语法糖，它是then(null,rejection)的别名，也就是说catch也是then,它用于捕获错误。
return Promise：
	手动return Promise, 能够按顺序执行每个异步回调中的内容。

Ajax 使用步骤

1.创建XmlHttpRequest对象 2.注册监听的回调函数 3.调用open方法设置基本请求信息 4.设置发送的数据，发送请求

JQuery Ajax

JQuery ajax 是对原生XHR的封装
$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

XMLHttpRequest 和 Ajax 的关系

ajax 最核心的依赖是浏览器提供的 XMLHttpRequest 对象。所以我用一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

fetch( fetch() 返回的是一个Promise对象 )

fetch api 可以结合 async 和 await 来使用的。 
fetch 是一种 HTTP 数据请求的方式，是 XMLHttpRequest 的一种替代方案。
fetch 不是 Ajax 的进一步封装，而是原生js。
Fetch函数就是原生js，没有使用XMLHttpRequest对象。
1、第一个参数是URL，第二个是可选参数，可以控制不同配置的 init 对象( fetch(url, options).then() )
2、使用了 JavaScript Promises 来处理结果/回调
fetch('http://localhost:3000/data')
.then(function(data){
	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
	return data.text();
}).then(function(data){
	//在这个then里面我们能拿到最终的数据 
	console.log(data);
})
//GET请求
fetch('http://localhost:3000/books?id=123', {	//restful形式的URL:http://localhost:3000/books/456
	//get 请求可以省略不写 默认的是GET
	method: 'get'
}).then(function(data) {
	//它返回一个Promise实例对象，用于获取后台返回的数据
	return data.text();
}).then(function(data) {
	//在这个then里面我们能拿到最终的数据 
	console.log(data)
});
//POST请求传参
fetch('http://localhost:3000/books', {
	method: 'post',
	body: JSON.stringify({
		uname: '张三',
		pwd: '456'
	}),
	headers: {
		'Content-Type': 'application/json'
	}
}).then(function(data) {
	//return data.json();	将获取到的数据使用 json 转换成对象
	return data.text();	//将获取到的数据 转换成字符串
}).then(function(data) {
	console.log(data)
});

axios( axios.get() 返回的是一个Promise对象 )

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基于 promise，用于浏览器和node.js的http客户端。
	1. 能拦截请求和响应。
	2. 自动转换JSON数据。
	3. 能转换请求和响应数据。
axios基础用法：
	get 和 delete请求传递参数：
		1. 通过传统的url 以 ? 的形式传递参数
		2. restful 形式传递参数
		3. 通过 params 形式传递参数
	post 和 put 请求传递参数：
		1. 通过选项传递参数
		2. 通过 URLSearchParams 传递参数
//发送GET请求
axios.get('http://localhost:3000/data')
.then(function(ret){
	//拿到 ret 是一个对象，所有的对象都存在 ret 的 data 属性里面。
	//注意data属性是固定的用法，用于获取后台的实际数据
	console.log(ret.data)
})
//请求传递参数
1. 通过传统的url 以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123')
2. restful 形式传递参数
axios.get('http://localhost:3000/axios/123')
3. 通过 params 形式传递参数
axios.get('http://localhost:3000/axios', {
	params: {
		id: 789
	}
})
4. 通过 URLSearchParams 传递参数
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params)
5. 通过选项
axios.post('http://localhost:3000/axios', {
	uname: 'lisi',
	pwd: 123
})

axios 全局配置

# 配置公共的请求头
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/json';

axios 拦截器

请求拦截器：
	请求拦截器的作用是在请求发送前进行一些操作。
	例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
响应拦截器：
	响应拦截器的作用是在接收到响应后进行一些操作。
	例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
# 1. 请求拦截器
axios.interceptors.request.use(function(config) {
	//任何请求都会经过这一步，在发送请求之前做些什么
	config.headers.token = 'nihao';
	//这里一定要return，否则配置不成功
	return config;
}, function(err){
	//对请求错误做点什么
	console.log(err)
});
# 2. 响应拦截器
axios.interceptors.response.use(function(res) {
	//在接收响应做些什么
	var data = res.data;
	return data;
}, function(err){
	//对响应错误做点什么
	console.log(err)
});

async 和 await（让异步代码看起来、表现起来更像同步代码）

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