vue 知识点整理——数据交互（axios、jsonp）

axios：

axios是基于promise的用于浏览器和nodejs的HTTP客户端，本身有以下特征：

• 从浏览器中创建XMLHttpRequest；
• 从nodejs发出http请求
• 支持promiseAPI
• 拦截 请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止CSRF/XSRF攻击

安装：

使用 npm:

$ npm install axios

引入：

引入 axios 数据加载模块:

import axios from 'axios'

执行 GET 请求：

axios.get('url',{
  params:{
    id:'接口配置参数（相当于url?id=xxxx）'，
  },
}).then(function(res){
  console.log(res);//处理成功的函数 相当于success
}).catch(function(error){
  console.log(error)//错误处理 相当于error
})

执行 POST 请求：

axios.post('uel',{data:xxx},{
  headers:xxxx,
}).then(function(res){
  console.log(res);//处理成功的函数 相当于success
}).catch(function(error){
  console.log(error)//错误处理 相当于error
})

执行多个并发请求：

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) {
    // 两个请求现在都执行完成
  }));

JSONP：

安装：

使用 npm:

$ npm install jsonp

引入：

引入 axios 数据加载模块:

import jsonp from 'jsonp'

执行 JSONP 请求：

jsonp(url, null, (err, res) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(res);
  }
});