vue中的 Ajax请求—axios

用于前后端分离项目 返回的是 Promise
axios请求别名
axios是一个就promise的HTTP库，可以用在浏览器和node.js中

配置路由

1.配置路由文件

routes.js：

let Index=()=>import('../view/Index.vue')
export default[
    {
   
        path:'/',
        name:'index',
        component:Index
    }
]

index.js：

import Vue from 'vue'
import vueRouter from 'vue-router'
Vue.use(vueRouter);
import routes from './routes';
let router= new vueRouter({
   
    mode:'history',
    routes
});
export default router;

2.挂载到main.js

new Vue({
   
  el: '#app',
  router,
  render: h => h(App)
})

3.在App.vue中配置出口

<div id="app">
  <router-view></router-view>
</div>

一、配置axios

我们使用第三方库

vue 使用axios插件

cnpm install --save-dev axios

（一）请求方法（不使用）

这种方法简单，但是在项目中到处使用会太冗余，
我们在接下来封装成模块使用

main.js:

（1）get请求
1.无参请求

import axios from 'axios'
axios.get('/').then((res)=>{
   

}).catch((err)=>{
   
  
})

2.带参请求

import axios from 'axios'
axios.get('/',{
   
  params:{
   
    id:1
  }
}).then((res)=>{
   

}).catch((err)=>{
   

})

（2）post请求
1.无参请求

import axios from 'axios'
axios.post('/').then((res)=>{
   

}).catch((err)=>{
   
  
})

2.带参请求

import axios from 'axios'
axios.get('/',{
   
    id:1
}).then((res)=>{
   

}).catch