Vue —— axios + fetch-jsonp-蒲公英云

Vue —— axios + fetch-jsonp

た入场券 2023-06-13 09:45 49阅读 0赞

一个bug解决：

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

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

axios

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

1. 使用axios步骤

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

下载axios :cnpm install axios --save-dev

将axios加到Vue原型链上：在main.js引入axios(import axios from "axios")，在实例化Vue之前Vue.prototype.axios(axios)
在其他地方直接使用：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:{}...})

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

method:请求方式。可取值：post/get 。
url:请求地址
timeout：等待时延。如果超过时间，则直接返回异常，即执行catch中的语句
auth:{username:"",password:""}：设置用户名和密码
responseType:可接受的数据类型。eg:json
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

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

1. 使用`fetch-jsonp`步骤

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

//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)
        })
      })