【Vue学习总结】13.使用Axios、fetchJsonp请求数据

接上篇《12.使用vue-resource请求网络数据》

上一篇我们主要讲解了如何使用vue-resource请求网络数据，本篇我们来讲解使用另外两种网路请求组件来实现实现网络数据请求。
本系列博文使用的Vue版本：2.6.11

上一篇我们提到，在vue中，常用的网络组件有三种，一种是vue-resource库，一种是axios，另外一种是fetch-jsonp。在这里面，vue-resource是vue的官方插件，而axios和fetch-jsonp是第三方的插件。本篇我们着重来讲一下后两种。

一、axios简介和安装

作为一个第三方的插件，axios就是一个封装好的模块化的插件，它是一个基于promise的HTTP库（Promise是异步编程的一种解决方案）。axios主要有以下功能：
（1）从浏览器中创建XMLHttpRequest
（2）从node.js中创建http请求
（3）支持Promise API
（4）拦截请求和响应
（5）转换请求和响应数据
（6）取消请求
（7）自动转换 JSON 数据
（8）客户端支持防止 XSRF 攻击

从上面的功能上我们可以看出来，axios是一个可以在类似node.js的框架中发起http请求的插件，附带有常用的HTTP请求和结果的处理机制。
注：不了解 Promise API的童鞋，可以查看这篇文章来学习：《Promise概念和常用api》https://blog.csdn.net/songlf521/article/details/55670977

如何使用axios插件呢？它和vue-resource使用方法不同，axios就使用我们平时引入自己编写的js插件的方式来引入即可（哪里用哪里引）。

我们在Github上搜索到axios插件（https://github.com/axios/axios），可以看到README的安装介绍：

1、执行安装命令：npm install axios --save
使用axios首先需要安装它，在编译器的控制台，找到我们的项目，执"npm install axios --save"安装命令：

引入之后，我们可以在工程的“node_modules”插件文件夹下看到它：

2、引入axios：import Axios from 'axios'
在我们需要引入axios，引入它。这里我们引入axios，编写一个get请求的逻辑（具格式分析在下面），请求的API还是上一篇我们请求的天气API：

<template>
  <!-- vue的模板里面，所有的内容都需要被一个根节点包裹起来 -->
  <div id="app">
    <h2>{{msg}}</h2>
    <button @click="getData()">请求数据</button>
    <br/><hr/>
    <ul>
      <li v-for="item in list" :key="item.date">
        {{item.date}}- {{item.week}}- {{item.wea}}- {{item.tem}}°C
      </li>
    </ul>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  name: 'app',
  data () {
      return {
        msg: '你好，vue',
        list:[]
      }
  },methods:{
      getData(){
        var api_url="http://www.tianqiapi.com/api";
        var that  = this;//这里重新指定this 是因为在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
         Axios.get(api_url, {
            params: {
              version: 'v9',
              appid:'51852773',
              appsecret:'35l07xNM',
              city:'北京'
            }
          })
          .then(function (response) {
            console.log(response);
            that.list=response.data.data;//和vue-resource的body不一样，body在axios是data
          })
          .catch(function (error) {
            console.log(error);
          });
      }
  }
}
</script>

<style>
</style>

要注意上面的this取值和response的结构（可以根据console打印的值分析结构）。
附：VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法：https://www.cnblogs.com/xxflz/p/9939627.html

效果：

可以看到，实现的效果也是一样的。

二、axios的参数详解

1、执行一个 GET 请求

//例子：请求一个用户的信息，请求参数为id，参数写在url路径上
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
// 例子：请求一个用户的信息，请求参数为id，参数封装到对象中
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

注：当请求被rejected时（什么是rejected，参见下面的Promise API介绍），catch回调函数被执行。

2、执行一个 POST 请求

// 例子：请求一个用户的信息，请求名称前后缀，参数封装到对象中
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

三、fetch-jsonp

fetch-jsonp也是一个第三方HTTP请求库，这里不做过多的介绍，和axios的调用方法基本一致，详见GitHub上的README介绍（https://github.com/camsong/fetch-jsonp）：

相比axios，fetch-jsonp支持jsonp（跨域请求），而axios不支持。

四、Promise API

我们可以看到，前面我们介绍的vue-resource、axios和fetch-jsonp的基本请求方法调用，和参数形式，基本都是类似的写法，其实这种函数的结构模式，就是所谓的“Promise”的API调用方法，那么什么是“Promise”呢？

Promise 是异步编程的一种解决方案，主要用来解决“回调地狱”的问题，可以有效的减少回调嵌套。Promise在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果。

有关“回调地狱”可以参见文章：https://www.jianshu.com/p/39adf6ab8ad1

更详细的Promise API介绍，可以看这一篇翻译文《Promise API 简介》https://www.cnblogs.com/wwhhq/p/8169020.html。

五：总结

vue-resource、axios和fetch-jsonp都支持HTTP网络请求，而vue-resource是vue官方的插件，它不需要哪里用哪里去引入，只需要我们在mainjs.js统一引入就可以使用了。（官方的vue-resource还是在更新的）
退一万步讲，我们也可以使用ajax直接进行异步网络请求，也是一样能达到效果的，技术没有绝对的优劣势，看怎么好用了(#^.^#)。

参考：
https://www.oschina.net/p/axios?hmsr=aladdin1e1
https://www.jianshu.com/p/39adf6ab8ad1
《IT营：itying.com-2018年Vue2.x 5小时入门视频教程》

转载请注明出处：https://blog.csdn.net/acmman/article/details/109140011