【Vue_03】前后端交互

原创
02/17 21:12
阅读数 643

一、Promise

1. Promise的基本使用
<script>
	var p = new Pormise(function(resolve, reject) {
	     // 这里实现异步调用
	
	     // 调用成功
	     resolve("success");
	
	     // 调用失败
	     reject("error");
	 });
	
	 p.then(function(data) {
	     // 成功的情况
	 },function(info) {
	     // 失败的情况
	 });
</script>   
2. 基于Promise发送Ajax请求
<script>
    function request(url) {
        // 创建一个 Promise 实例
        var p = new Pormise(function(resolve, reject) {
            // 获取与后台交换数据的对象 XMLHttpRequest
            var xhr = new XMLHttpRequest();

            /* 
                - readyState 改变时触发 onreadystatechange 事件
                - readyState: XMLHttp 请求的当前状态
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
                - status:响应状态码
                    200: "OK"
                    404: 未找到页面
            */
            xhr.onreadystatechange =  function() {
                if(xhr.readyState != 4) {
                    return ;
                }
                
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 请求成功的情况,通过 responseText 属性来获取由服务器返回的数据
                    resolve(xhr.responseText);
                } else {
                    // 处理请求失败
                    reject("请求失败");
                }
            }
            
            /* 
                初始化一个请求
                open(method, url, async, username, password)
                    method: 请求方式
                    url: 请求的地址
                    async: 请求是否异步,默认异步
                    userrname、password: 可选,为 url 的授权提供认证
            */
            xhr.open("get", url);

            /* 
                发送 http 请求
                send(参数可选)
                    null: 代表只有 url 没有数据体。例如:get 请求
                    数据体:除了请求头信息还包含具体数据的数据体。例如:post请求
            */
            xhr.send(null);
        });

        // 返会 Promise 实例
        return p;
    }

    // 请求数据
    request("http://localhost/first/data").then(
        function(data) {    // 参数1:处理请求成功的方法
            console.log(data);
        },function(info) {  // 参数2:处理请求失败的方法,可以省略
            console.log(info);
        }
    );
</script>      
3. Promise的常用API
  • 实例方法

    then(方法 1, 方法 2) :方法 1 处理异步正常的数据,方法 2 处理异步失败(可以不写), 链式编程时需要在上一个 then 中使用 return

    catch(方法) :处理异步失败,与 .then 的方法 2 效果一致

    finally(方法) :无论如何最后都会执行的方法

  • 静态方法

    all(数组) :接收一个数组,每个数组元素都是一个 Promise 实例,当这个数组中的 Promise 实例全部返回时,方法执行结束

    race(数组) : 接收一个数组,每个数组元素都是一个 Promise 实例,当这个数组中的 Promise 实例有一个返回时,方法执行结束

二、fetch

Fetch 是新的 Ajax 的解决方案,会返回一个 Promise

Fetch 不是 Ajax 的进一步封装,而是原生 JS ,没有使用 XMLHttpRequest

1. fetch的基本使用
<script>
	// fetch的参数为请求的路径,默认为 get 请求
    fetch("url")
    .then(
    	function(data) {  // 成功返回的 data 是一个 Promise 实例,不能直接拿到数据
    		// 需要使用 fetch 的方法 text() 取出数据
    		data.text();
    	},function(info) { // 失败返回的 info 我们可以直接拿到数据
    	}
    );
</script>
2. fetch的Http请求
  • get/delete
    <script>
         fetch("url",{
         	 // 请求方式,get/delete 请求没有数据体,参数在 url 中
             method: "get/delete"
         }).then(function(data){},function(info){});
     </script>
    
  • post/put
    <script>
        fetch("url",{
        	// 请求方式
            method: "psot/put",
            // 数据体
            body: JSON.stringify({
                name: '王大锤',
                age: '250'
            }),
            // 请求头信息
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function(data){},function(info){});
    </script>
    
3. fetch的响应格式

data.json() : 将返回的数据转为 json

data.text() : 将返回数据转为字符串

三、axios

1. axios的基本使用
  • get /delete请求
    <script>
    	// 传统 url 传参
    	axios.get/delete("http://localhost/test?id=007") 
    	.then(function(ret) { // ret 的 data 属性中存放了所有数据
    		console.log(ret.data);
    	})
    	
    	// params 传参
    	axios.get/delete("http://localhost/test", {
    		params: {
    			id: 007
    		}
    	})
    	.then(function(ret) {
    		console.log(ret.data);
    	})
    </script>
    
  • post/put请求
    <script>
    	// 通过选项传参
    	axios.post/put('http://localhost/test/data', {
    		name: '王大锤',
    		age: 250
    	}).then(function(ret){
    		console.log(ret.data)
    	})
    
    	// 通过 URLSearchParams
    	var params = new URLSearchParams();	
        // 添加数据
        params.append('name', '王大锤');
        params.append('age', '250');
        // 发送请求
        axios.post/put('http://localhost/test.data', params)
        .then(function(ret){
          console.log(ret.data)
        })
    </script>
    
2. axios全局配置

配置公共的请求头,配置之后再 url 中可以省略公共的请求头 axios.defaults.baseURL = 'http://localhost/test'; —————————— 配置超时时间 axios.defaults.timeout = 3000; —————————— 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/json';

3. axios拦截器
  • 拦截器分类

    1.请求拦截器        请求拦截器的作用是在请求发送前进行一些操作。 2.响应拦截器        响应拦截器的作用是在接收到响应后进行一些操作。

  • 请求拦截器
    <script>
          axios.interceptors.request.use(function(config) {
              // 任何请求都会经过这里
              console.log(config.url)
              // 必须要 return 否则配置不成功
              return config;
          }, function(error){ 
              // 处理错误请求 
              console.log(error)
          });
    </script>
    
  • 响应拦截器
    <script>
        axios.interceptors.response.use(function(res) {
            // 处理响应
            return res.data;
        }, function(error){ 
            // 处理错误响应 
            console.log(error)
        });
    </script>
    

四、ES7新方法 (async/await)

async 作为一个关键字放到方法前面

async 都会隐式的返回一个 Promise 实例

await 只能在 async 修饰的方法内使用,且 await 不能单独使用

await 后可以跟一个 Promise 实例

<script>
	// 配置公共的请求头
    axios.defaults.baseURL="http://localhost/test";

    async function request() {
        // 添加 await 之后,当前 await 返回结果之后才会执行下面的代码
        var info = await.get("data1");
        var ret = await axios.get("data2?info=" + info.data);
        return ret.data;
    }

    request().then(function(data){
        console.log(data);
    });
</script>
展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部