Vue前后端交互Promise&axios

Promise

Promise解决了异步深层嵌套的问题(回调地狱)

//1.使用new构建一个Promise对象,Promise构造函数接受一个函数参数,并且传入两个参数,resolove(异步操作执行成功后的回调函数),reject(异步操作执行失败后的回调函数)
        var p = new Promise(function (resolve, reject) {
            var flag = false;
            //2.这里只是用serTimeout模拟异步任务
            setTimeout((flag) => {
                if (flag) {
                    //3.表示成功的情况
                    resolve('true');
                } else {
                    //4.表示失败的情况
                    reject('false');
                }
            }, 1000);
        });
        p.then(function (data) {
            console.log(data);//打印true
        }, function (info) {
            console.log(info);//打印false
        })

实例方法

.then()

• 得到异步任务正确的结果

.catch()

• 获取异常信息

.finally()

• 成功与否都会执行（不是正式标准）

静态方法

.all()

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

.race()

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

		function queryData(url) {
            var promise = new Promise(function (resolve, reject) {
                let xhr = new XMLHttpRequest();
                xhr.open('get', url);
                xhr.send();
                xhr.onload = function () {
                    if (xhr.status == 200) {
                        resolve(xhr.responseText);
                    } else {
                        reject('请求错误!');
                    }
                };
            });
            return promise;
        }
        var p1 = queryData('http://localhost:3000/a1');
        var p2 = queryData('http://localhost:3000/a2');
        var p3 = queryData('http://localhost:3000/a3');
        //all 中的参数 [p1,p2,p3] 和 返回的结果一 一对应
        Promise.all([p1, p2, p3]).then(function (data) {
            console.log(data); //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
        })
        // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
        Promise.race([p1, p2, p2]).then(function (data) {
            console.log(data); // "HELLO TOM"
        })

fetch

• Fetch API是新的ajax解决方案 Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
• fetch(url, options).then(）---- options 设置请求方法(methods),请求头(headers),请求参数(body)

 <script type="text/javascript">
        /*
              Fetch API 调用接口传递参数
        */
       #1.1 GET参数传递 - 传统URL  通过url  ？ 的形式传参 
        fetch('http://localhost:3000/books?id=123', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一个Promise实例对象，用于获取后台返回的数据
                return data.text();
            }).then(function(data) {
            	# 在这个then里面我们能拿到最终的数据  
                console.log(data)
            });

      #1.2  GET参数传递  restful形式的URL  通过/ 的形式传递参数  即  id = 456 和id后台的配置有关   
        fetch('http://localhost:3000/books/456', {
            	# get 请求可以省略不写 默认的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #2.1  DELETE请求方式参数传递      删除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #3 POST请求传参
        fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  传递数据 
                body: 'uname=lisi&pwd=123',
            	#  3.2  设置请求头 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                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.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT请求传参     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '张三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>

响应格式

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

官网地址:https://github.com/axios/axios

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

axios基础用法

• get和 delete请求传递参数
  • 通过传统的url 以 ? 的形式传递参数
  • restful 形式传递参数
  • 通过params 形式传递参数
• post 和 put 请求传递参数
  • 通过选项传递参数
  • 通过 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响应结果

data ： 实际响应回来的数据
headers ：响应头信息
status ：响应状态码
statusText ：响应状态信息

axios全局配置

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

axios拦截器

• 请求拦截器
  • 请求拦截器的作用是在请求发送前进行一些操作
  • 例如在每个请求体里加上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)
    })