vue中几种网络请求

1. axios ；官方推荐使用，axios 是由 promise 封装的一个 http 的库。http://www.axios-js.com

导入框架：npm install axios --save   或者使用cdn ：  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

// 第三方axios网络请求，因为axios不是Vue的插件，所以引入的时候要用原型的方式.
import axios from 'axios'
Vue.prototype.$http = axios     //这是用原型的方式引入
// 设置基本路径(如果不设置就需要在后面的请求中填写全路径)
axios.defaults.baseURL='http://localhost:8080'
axios.defaults.timeout=10000;
// axios.defaults.headers['mytoken']="token"

//设置请求拦截器,把token传递到后台
// axios.interceptors.request.use(function(config){
//     // console.log(config.url)
//     //打开进度条
//     // NProgress.start()
//     config.headers.Authorization=window.sessionStorage.getItem('token');
//     return config;
// },function(err){
 
// })
// //响应拦截器
// axios.interceptors.response.use(function(config){
//     // console.log(config.url)
//     //结束进度条
//     // NProgress.done()
//     return config;
// },function(err){
 
// })

使用：方法一：

第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。如果前一个回调函数返回的是Promise对象，这时下一个回调函数就会等待该Promise对象有了运行结果，才会进一步调用。

<script>
    export default{
          methods:{

              // 发起登录请求
              this.$http.post('/login',{username:"lambo",password:"12345678"},{//这里可以设置header}).then(ret=>{
                console.log(ret)
                console.log("wwww")

                     }).catch(error => {
                           console.log(error)
                         });
               }
           }
</script>

方法二：

<script>
    export default{
          methods:{

              // 注意没有.post或者.get
                  this.$http({
                 method: 'post',
                 url: '/login',
                  // 传递参数
                data: {username:"lambo111"},
                // 设置请求头信息
                headers: {
                 "Content-Type":"application/json"
                    }
                 // responseType: 'json'
                       }).then(response => {
                   // 请求成功
                     let res = response.data;
                    console.log(res);
                     return res;     //这里的return 会传递到下一个then的参数res
                        }).then(res => {
                         // 请求成功
                        console.log("next"+res);
                         }).catch(error => {
                          // 请求失败，
                          console.log(error);
                            });
               }
           }
</script>

同时发起多个请求：等到所有请求执行完毕在返回数据，使用axios.all

function gethomedata() {
  return axios.get('/home');

//或者axios.get('/home').then(res => res.data);

}
 
function getuserinfo() {
  return axios.get('/user');

//或者axios.get('/user').then(res => res.data);

}
axios.all([gethomedata(), getuserinfo()])
  .then(axios.spread(function (val1,val2) {
    //axios同时请求多个接口，当所有接口全部请求成功之后，接收返回的数据，进行处理。会收到一个数组，包含着响应对象，其中的顺序和请求发送的顺序相同，可以使用 axios.spread 分割成多个单独的响应对象
    // val1和val2 是数组中每个接口返回的值.

  }));

同时发起多个请求：选择最快返回的数据,使用 Promise.race

 Promise.race([

          axios.get("localhost:8081/gethome",{

            params: {

              "usrname":"lambo"

              }

          }),   

          axios.get("localhost:8081/getuerinfo",{

            params: {

              "usrname":"lambo"

              }

          }),

        ]).then(res => {

          if(res.length == 0 ){

          }else{

                     }

            }).catch(err => {

              console.log(err)

            })

 

 2.axios搭配 async    await  ， 是es7的新语法；用在函数上；await：用在async函数内部； https://www.cnblogs.com/youma/p/10475214.html

async/await其实是Promise的语法糖，它能实现的效果都能用then链来实现，它是为优化then链而开发出来的首先用async声明一个异步函数，然后再用await等待异步结果，把以前then链的结果直接放在await后面。

<script>
    export default{
          methods:{

             // 发起login请求，等待await执行完毕，才执行其他代码
                  async  login(){
                     var info=await  this.$http.post('/login',this.loginform);
                      console.log(info);

                      } 
               }
           }
</script>

 直接在await后面加then

<script>
    export default{
          methods:{

             // 发起login请求
                 async  login(){
                 var info=await  this.$http.post('/login',this.loginform).then(res => {

                     });
                  } 
               }
           }
</script>

解释：如果函数是异步的（前面有async）,那么这个函数总是返回一个promise，如果代码中有return <非promise>语句，JavaScript会自动把返回的这个value值包装成promise的resolved值（例如：Promise.resolve(1)  把1包装成promise）。可以使用 then 方法添加回调函数。

await后面可以跟任何的东西。 await表达式的运算结果取决于它后面等待的东西。如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。resolve的值会在then链中传递下去。

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

关键词await可以让JavaScript函数进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。

正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。

 

 3. Promise是es6 为解决异步编程的。创造promise实例后，它会立即执行。https://www.runoob.com/w3cnote/javascript-promise-object.html

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。

then()方法是异步执行。意思是：就是当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到的问题。

then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个参数只会有一个被调用。

resolve 方法和 reject 方法调用时，都带有参数。它们的参数会被传递给then的回调函数。reject 方法的参数通常是 Error 对象的实例，而 resolve 方法的参数除了正常的值以外，还可能是另一个 Promise 实例

async  login(){

    const p1 = new Promise(function(resolve,reject){
    resolve('success1');//resolve的值会在then链中传递下去。
    resolve('success2');// 上面的已经处于fulfilled状态，resolved就不会在法改变了，这一个就不执行了。

    reject("");//如果错误就用reject
       }); 

 p1.then(function(value){ //p1中resolve反出的值会传递到这里的value中
    console.log(value); // success1
        });

    }

 

4.Fetch，Fetch是基于promise设计的,它不是ajax的进一步封装，而是原生js API，没有使用XMLHttpRequest对象。ie浏览器不支持，需要导入安装es6-promise解决。 fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据。

res.json（）/res.text（）获取到的是一个新的promise实例，arr.txt的值在[[[PromiseValue]]里面，但是直接取是取不出来的。没有方法取出来，Promise的设计文档中说了，[[PromiseValue]]是个内部变量，外部无法得到，只能在then中获取。所以就会用到第二次then了。

导入框架  npm install whatwg-fetch --save

在main.js中引入import 'whatwg-fetch'

 async  login(){
 fetch('http://localhost:8080/login', {
              method: 'POST',

             mode: "cors",//如果跨域加上这一行

              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                username: 'yj',
                password: 'yj',
              })
            }).then(res=>{

            //res.text 返回的是一个纯文本  是一个promise对象
            //res.json 返回的是一个对象（json/array）  是一个promise对象
            //res是只能被读取一次的,console.log取一次，return取一次，会报错

                        let resdata = res.json();
                        return   resdata；

               // res.json().then(res=>{
                  // console.log(res);
                   //  });
            }).then(data=>{

                      //上一个then返回值是Promise对象（即有异步操作），等待该Promise对象的状态发生变化,then才会被调用

                      console.log(1，data) },

                        data2=>{ console.log(2,data2) }

                   ).catch(err=>{

                           console.log(4,err);

                        });

      } 

 

 

5.Ajax；可以局部刷新；vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。

6.JQery；ajax的封装；

7.vue-resource ; 在Vue1.x中，官方推荐使用;不在更新和维护。

 

 

• 几种方式的对比
  ajax：
  【优点：局部更新；原生支持】
  【缺点：可能破坏浏览器后退功能；嵌套回调】
  jqueryAjax：
  【在原生的ajax的基础上进行了封装；支持jsonp】
  fetch：
  【优点：解决回调地狱】
  【缺点：API 偏底层，需要封装;默认不带Cookie，需要手动添加; 浏览器支持情况不是很友好，需要第三方的ployfill】
  axios：
   

• axios的特点
  支持浏览器和node.js
  支持promise
  能拦截请求和响应
  能转换请求和响应数据
  能取消请求
  自动转换JSON数据
  浏览器端支持防止CSRF(跨站请求伪造)