axios vue-axios post请求php无结果问题解决方法

序

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

axios特征

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

安装

在项目根目录执行以下命令进行安装：

$ npm install --save axios vue-axios

入口main.js修改如下

由于axios对于post请求的默认请求方式与jQuery不同，需要手动将 Content-Type 设置为 application/x-www-form-urlencoded ；另外，它传输的json字符串而不是类似这样的字符串（例如： id=5&name=loushengyue&sex=male ），所以我们还需要一个工具来讲json数据手动转换成这个格式，那么我们就可以使用nodejs的 querystring 组件。具体配置如下：

import axios from 'axios'
import VueAxios from 'vue-axios'

//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' //当前最新版本axios这一句无需配置

Vue.use(VueAxios, axios) //VueAxios, axios的位置不能颠倒
Vue.prototype.$qs = require('querystring') //nodejs自带querystring模块

注意：如果您的nodejs版本过低，有可能没有querystring模块，这时候你需要执行npm install --save query-string进行安装，同时在入口页main.js引入即可。

例如：Vue.prototype.$qs = require(‘query-string’)

在组件发出post请求

export default {
  name: "App",
  methods: {
    postTest() {
      let url = "/admin/postTest.php"
      let data = { id: 5, name: "loushengyue" }
      data = this.$qs.stringify(data)
      console.log(data); //看一看这一句的输出，你会知道$qs.stringify的作用
      this.axios.post(url, data).then(response => {
        console.log(response); //这里返回的结果会包括请求头，返回数据结果等（这里的返回值与jQuery不一样）
      })
    }
  },
  created(){
    this.postTest() //创建页面时调用postTest()方法（当然也可以通过点击事件触发）
  }
}

---

友情链接

axios
vue-axios
querystring

---

谢谢关注，欢迎点赞：）