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

 

[plain] view plain copy

1. // GET请求  
2. axios.get('/user?ID=1')  
3.   .then(function (response) {  
4.     console.log(response);  
5.   })  
6.   .catch(function (error) {  
7.     console.log(error);  
8.   });  
9.   
10. // POST请求  
11. axios.post('/user', {  
12.     firstName: 'Fred',  
13.     lastName: 'Flintstone'  
14.   })  
15.   .then(function (response) {  
16.     console.log(response);  
17.   })  
18.   .catch(function (error) {  
19.     console.log(error);  
20.   });  

 

全局使用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的异步请求方法