Axios 发布待处理答案

【问题标题】：Axios post stay on pendingAxios 发布待处理
【发布时间】：2018-08-24 11:41:59
【问题描述】：

这是一个在 Vue 中使用 Axios 的简单 Post 请求：

import axios from 'axios'
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    mounted () {
        const code = 'test'
        const url = 'http://localhost:3456/'
        axios.post(url, code, { headers: {'Content-type': 'application/x-www-form-urlencoded', } }).then(this.successHandler).catch(this.errorHandler)
    },
    methods: {
        successHandler (res) {
            console.log(res.data)
        },
        errorHandler (error) {
            console.log(error)
        }
    }
}

Get 方法工作正常。但发布在网络选项卡上保持为“待处理”。我可以确认我的网络服务上有一个 Post 方法并且它返回了一些东西（在 Postman 上测试过）。

更新

将代码作为参数发送：

axios(url, {
    method: 'POST',
    headers: {
        'content-type': 'application/json',
    },
    params: {
        code : 'test'
    },
}).then(this.successHandler).catch(this.errorHandler)

网络服务

server.post('/', (req, res, next) => {
    const { code }  = req.params

    const options = {
        validate: 'soft',
        cheerio: {},
        juice: {},
        beautify: {},
        elements: []
    }

    heml(code, options).then(
        ({ html, metadata, errors }) => {
            res.send({metadata, html, errors})
            next()      
        })
})

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

我认为您的 axios 请求结构存在问题。试试这个：

const URL = *YOUR_URL*;
axios(URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    data: *YOUR_PAYLOAD*,
  })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });

如果您要发送查询参数：

axios(URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    params: {
     code: 'your_string'
    },
  })

如果是路径变量，你可以设置你的 url：

const url = `http://localhost:3456/${code}`

如果问题仍然存在，请告诉我

【讨论】：

现在发生了一些事情。但这是一个错误：代码：“InvalidContent”，消息：“无效的 JSON：JSON 中位置 1 的意外标记 e”。我的网络服务需要一个称为代码的参数，它必须是一个字符串。
我建议坚持使用 application/json 内容类型。你应该发送 {code: 'your_string'} 并且在服务器端你会得到一个 JSON 并且你可以从请求负载中检索 'code' 键。您的发布请求的问题已解决，这是解析的问题。
好的，我会试试这个。还有一个问题：我在 localhost:3456 上运行 webservice，在 localhost:8080 上运行 vue 应用程序。这是个问题？
发现问题。我的网络服务期望代码作为参数。
已修复！而不是在webservice上使用const { code }= req.params，我改为const { code } = req.body

【解决方案2】：

我也面临同样的问题。网络调用一直处于挂起状态，并通过从 server.js(route file) e.g(res.json(1);) 传回响应来缓解它，它解决了问题

【讨论】：