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的异步请求方法

 

展开阅读全文

没有更多推荐了,返回首页