基于node.js的服务端在vue中使用axios发起请求的方法

最近了解了一下vue，它的数据绑定方式与小程序类似，但开始使用request请求时却不知所措，因为与小程序不同的是，vue并没有像wx:request()这样的用法，后来查了一下，发现了axios的方法挺不错，所以在这里分享一下。
下面介绍一下使用方法，其中分为两种情况，一种是在html中引入vue文件的情况，另一种是使用vue-cli脚手架的情况：

在html中引入vue文件的情况

一、安装。

• npm安装：npm i axios
• 引入到项目：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、使用。
1、因为是基于node.js的服务端，所以node.js中需要有请求的路由，先上一个简单的代码：

app.get('/return',function (req,res) {
    res.send('success!')
})

当然，还有网页的路由：

app.get('/',function (req,res) {
    fs.readFile('./http.html',function (err,data) {
        if(err){
            console.log(err)
        }else {
            res.send(data.toString())
        }
    })
})

http.html中即是vue发起请求代码
下面再看一下http.html中vue部分的代码

request:function () {
                axios('/return').then(function (value) { console.log(value) })
                console.log('ok')
            },

其中，‘/return’就相当于你的服务器域名+/return，例如：www.baidu.com/return,
注意：
axios()请求是不能跨域的，就是说所请求的内容只能是你自己服务器上的路由，即使是同一台服务器，不同级的域名也是不能发起请求的，如果使用，就会报如下错误：

正常发起请求后，打开控制台就可以发现控制台打印出了‘ok’和‘success’，如图：

使用vue-cli脚手架的情况

1、安装方法和上面一样，引入到项目有一些差别：
在script标签中直接写入下面语句即可使用

import axios from 'axios';

使用:

 axios('/return').then(function (value) {
        console.log(value)
      })

发起请求后，会得到和上面相同的结果。
下面再介绍一下axios请求的不同书写方式：

• post请求

axios.post('demo/url', {
    id: 123,
    name: 'Henry',
},{
   timeout: 1000,
    ...//其他相关配置
})

//原始的Axios请求方式
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  timeout: 1000,
  ...//其他相关配置
});

• get请求

axios.get('demo/url', {
    params: {
        id: 123,
        name: 'Henry',
    },
   timeout: 1000,
  ...//其他相关配置
})

也可以直接写成这样：

 axios('/return').then(function (value) {
        console.log(value)
      })

因为axios的默认请求方式就是get。