Vue学习02--Vue如何使用axios异步请求后台

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

特征

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

安装

本项目是使用IDEA软件打开运行的。安装axios时，直接在Terminal中，加入-D表示将该依赖加入到package.json文件的DevDependencies中

$ npm install axios -D

直接引用Axios

// GET请求
axios.get('/user?ID=1')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// POST请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

全局使用Axios

首先，在自己建的公用方法的文件中new一个新的HttpUtil.js文件。以下为HttpUtil.js的内容：

var axios = require('axios')

// 配置项目根如路径
var root = 'http://localhost:8090/manage'

// axios请求
function httpApi (method, url, params) {
  return new Promise((resolve, reject) => {
    axios({
      method: method,
      url: url,
      data: method === 'POST' || method === 'PUT' ? params : null,
      params: method === 'GET' || method === 'DELETE' ? params : null,
      baseURL: root,
      withCredentials: false
    }).then(
      (response) => {
        resolve(response)
      }
    ).catch(
      (error) => {
        reject(error)
      }
    )
  })
}

// 返回在vue模板中的调用接口
export default {
  get: function (url, params) {
    return httpApi('GET', url, params)
  },
  post: function (url, params) {
    return httpApi('POST', url, params)
  },
  put: function (url, params) {
    return httpApi('PUT', url, params)
  },
  delete: function (url, params) {
    return httpApi('DELETE', url, params)
  }
}

在main.js中进行全局设置

这样就完成了Axios的全局设置，可以在其他组件中直接引用Axios的异步请求方法