Vue —— axios + fetch-jsonp

一个bug解决：

有时在Vue工程中写es6语法代码会报regeneratorRuntime is not defined的错误，此时可通过下面方式解决：

1. 下载npm install --save-dev babel-polyfill
2. 在webpack.config.js中写var babelpolyfill = require("babel-polyfill")
3. 在使用es6语法组件中/main.js引入babel-polyfill : import "babel-polyfill"

axios

1. axios支持cross跨域请求，不支持jsonp
2. 返回的为一个promise对象，需要通过then方法获取传回来的值

1. 使用axios步骤

1. 下载axios :cnpm install axios --save-dev
2. 在使用axios处引入axios：import axios from "axios"
3. 使用

1. 下载axios :cnpm install axios --save-dev
2. 将axios加到Vue原型链上：在main.js引入axios(import axios from "axios")，在实例化Vue之前Vue.prototype.axios(axios)
3. 在其他地方直接使用：Vue.axios/axios

2. axios两个get请求传值方式：

① 在url路径后面传值：?name=value&name2=value2
② params:{key:value;key2:value2}

3. axios写法：

① axios.get("url",{配置信息})
② axios.post("url",data,{配置信息})
③ axios({method:"请求方式",url:"",data:{}...})

第三种方式配置信息详解：

1. method:请求方式。可取值：post/get 。
2. url:请求地址
3. timeout：等待时延。如果超过时间，则直接返回异常，即执行catch中的语句
4. auth:{username:"",password:""}：设置用户名和密码
5. responseType:可接受的数据类型。eg:json
6. responseEncoding：可接受的字节编码。eg:utf-8

//1
axios .get(
  "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
  )
  .then(res => {
   console.log(res);//打印返回信息
   })
 .catch(err => {})//捕捉异常
 .finally(() => {});//无论是否成功与否都会执行

//2
 axios.post("",{
  //传递的值
 },{
 //配置信息
 })

//3
axios({
  method:"post",
  url:"",
  data:{},
   timeout:500,
   auth:{//设置用户名和密码
     username:"",
    password:""
  },
  responseType:"json",
   responseEncoding:"utf-8"//设置字节编码
}).then().catch()

fetch-jsonp

1. 使用fetch-jsonp是通过拼接script，传递src的方式来跨域的，故只能是GET方法，则传值也只能在url上进行拼接
2. fetch-jsonp返回的为promise对象，但其需要通过两次连续的调用then方法才能取到返回值，具体实现见下面。

1. 使用fetch-jsonp步骤

1. 下载：cnpm install fetch-jsonp --save-dev
2. 在所要使用的组件中引入jsonp：import fetchJsonp from "fetch-jsonp ";/ 将其加到Vue原型链中
3. 使用

//main.js
import fetchJsonp from 'fetch-jsonp'
Vue.prototype.fetch(fetchJsonp);

//使用fetch-jsonp组件
fetch(
   "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1"
 )
   .then(res => {
    console.log(res.json());//res.json()是一个包含返回数据的promise
    return res.json();
   })
   .then(res => {
    console.log(res);
  });

//异步方式
 let data = async ()=> await fetch(url);
      data().then(res=>{
        res.json().then((res1)=>{
          console.log(res1)
        })
      })