Vue.js 2 - Axios 异步请求技术使用技巧



axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

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

在 Vue.js 2.0 使用 axios 步骤如下:

1. 本地搭建好 Vue.js 环境以后,用 NPM 或者 CNPM 安装 axios 插件 :

$ cnpm install axios -S

2. 安装其他插件的时候,可以直接在 main.js 中引入并使用 Vue.use()来注册,但是 axios并不是vue插件,所以不能 使用Vue.use(),所以只能在每个需要发送请求的组件中即时引入。 为了解决这个问题,我们在引入 axios 之后,通过修改原型链,来更方便的使用:

import axios from 'axios'
Vue.prototype.$http = axios 

3. methods 中添加点击函数 dianji() 使用 $http 命令获取数据:

 dianji() {     
    this.$http.get("http://jsonplaceholder.typicode.com/posts")           
    .then(function (response) {           
        console.log(response.data);          
    })       
    .catch(function (error) {          
        console.log(error);       
     });
}

微信截图_20180509124832.png


4. axios 默认提交 application/json 格式。如果使用这种编码方式,那么传递到后台的将是序列化后的 json 字符串。我在这里用 application/x-www-form-urlencoded 格式提交数据 (数据是 key-value 形式,后台程序 $_POST[“key”] 方便处理数据),这时我需要重新修改 main.js  中的原型链 :

import axios from "axios"  //引入
//设置axios为form-data
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let ret = ''
    for (let it in data) { 
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]
//然后再修改原型链
Vue.prototype.$axios = axios

5. methods 中添加点击函数 dianji() 数据提交到后台处理接口:

dianji() {
    this.$axios({
    method: 'post',
    url: 'http://127.0.0.1/yuangongguanli/yuangong_fenlei_add.php',
    data: {
        fenleimingcheng: '员工分类名称'
    }
    })
}


微信截图_20180509180813.png

标签: Vue.js Axios 异步请求 前端