axios与fetch-jsonp

Axios 跨域 cros跨域 Axios文档

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

功能
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

使用步骤
1、安装cnpm install axios --save-dev
2、引入import axios from 'axios' (在需要使用的组件中)
3、使用

1、安装
2、引入 在main.js中引入axios import axios from 'axios'
3、在vue实例化之前Vue.prototype.axios(axios)
4、在其他组件中直接使用 Vue.axios/axios

get请求传值方式

1、在url路径后面传值 ：?id=1&name=maodou
2、参数不在路径上：params: { id: 1}
3、es6 async函数写法
4、执行多个并发请求

1------------------在url路径后面传值 ：?id=1&name=maodou
let src = "http://www.maodou.com/data/userinfo.php?id=1&name=maodou";
    axios
      .get(src)
      .then(res => {
        //success 区域
        console.log(res);
      })
      .catch(err => {
        //错误时代码区域
      })
      .finally(() => {
        // 最后写代码
      });

2------------------参数不在路径上：params: { id: 1}
 let url = "http://www.maodou.com/data/stu.php";
    axios
      .get(url, {
        params: {
          id: 1
        }
      })
      .then(res => {})
      .catch(err => {})
      .finally(() => {});

3------------------es6  async函数写法
async function getData() {
      let data = await axios.get("");
      return data;
    }
    getData()
      .then(res => {})
      .catch(err => {});

4------------------执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

post请求方式

post请求参数不在params中，它直接传递

参数在路径上
 axios.post("路径").then((res)=>{}).catch((err)=>{});
 参数不在路径上
    axios.post("路径",{
       id:1,
       name:"22"
    }).then((res)=>{}).catch((err)=>{});

config配置方式

1、post请求
    axios({
      method: "post",
      url: "",
      data: {},
      timeout: 500,//设置请求超时时间的
      auth: {//设置用户名和密码
        username: "",
        password: ""
      },
      responseType: "json",//返回的数据类型
      responseEncoding: "utf-8"//设置字节编码
    })
      .then(res => {})
      .catch(err => {});

2、get请求
   let url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    axios.get(url).then((res)=>{
        console.log(res.data.result);
        this.msg=res.data.result;
    }).catch((err)=>{
    });

fetch-jsonp跨域 jsonp跨域 fetch-jsonp文档

返回的是promise对象

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

使用步骤
1、安装 cnpm install fetch-jsonp --save-dev
2、引入 import jsonp from "fetch-jsonp";
3、直接使用

    let url = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
    jsonp(url)
      .then(res => {
        return res.json();
      })
      .then(res => {
        console.log(res);
      }).catch((err)=>{
          console.log(err);
      });

配置jsonp
    jsonp(url, {
      jsonpCallback: "callback", //回调函数的参数名称
      jsonpCallbackFunction: "getData",//回调函数名
      timeout: 2000,
    })
      .then(res => {
        return res.json();
      })
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });

async写法
 let data = async () => await jsonp(url).then(res => res.json());
    data().then(res => {
      console.log(res);
    });
  },
  

使用es6 async 函数报错 regeneratorRuntime is not defined" 处理方法

    
    1.安装babel支持es6的拓展包
    cnpm install --save-dev babel-polyfill
    2.去配置文件webpack.config.js  写引入
    var babelpolyfill = require("babel-polyfill");
    3.直接去main.js里面直接导入
    import "babel-polyfill";