axios网络交互应用-Vue

<template>
 <div id="app">
 <input type="text" placeholder="name" v-model="user.name">
 <input type="text" placeholder="age" v-model="user.age">
 <button type="button" class="btn" @click="btn.clickcallback">
 {{btn.text}}
 </button>
 <table class="table">
  <thead>
   <tr>
    <th>id</th>
    <th>name</th>
    <th>操作</th>
   </tr>
  </thead>
  <tbody>
   <tr v-for="item,index) in users" :kkey="index">
    <td scope="row">{{item.id}}</td>
    <td>{{item.name}}</td>
 
    <td>
     <a class="btn" href="#" role="button"
     @click.prevent="edituser(index)">编辑</a>
     <a class="btn" href="#" role="button" @click.prvent="deleteuser(index)">删除</a>
     </td>
    </tr>
    </tbody>
    </table>
    </div>
    </template>
    <script>
    import "bootstrap/dist/css/boostrap.css";
    export default {
     name: 'app',
     data(){
     return {
      users: [],
      // 添加数据
      user: {},
      editindex: -1,
      btn: {
       text: '添加用户',
       clickcallback: this.adduser
      }
     };
    },
    methods: {
     adduser(){
     const app = this;
     axios.post('/api/users',this.user).then(res=>{
     app.users.push(res.data.data);
     app.user ={};
    });
   },
   edituser(index){
   this.editindex = index;
   this.user = this.users(index);
   this.btn={
   text: '编辑用户',
   clickcallback: this.doedituser
   };
  },
  doedituser(){
  axios.put('/api/users/'+this.users[this.editindex].id,this.user).then(res => {
  app.editindex=-1;
  app.user ={};
  app.btn={
  text: "添加用户",
  clickcallback: app.adduser
 };
});
},
// 删除用户
deleteuser(index) {
const app = this;
axios.delete('/api/users/'+this.users[index].id).then(function(res){
if(res.data.status){
app.users.splice(index,1);
}
};
}
},
// axios网络请求获取数据
created： function(){
const app = this;
axios.get('/api/users').then(res=>{
app.users=res.data.data;
})
}
}
</script>

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get', 'http://。。。');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
        //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
        console.log(ajax.responseText);//输入相应的内容
    }
}

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//打开xhr
xhr.open('post', 'http://。。。');
//post请求一定要添加请求头才行不然会报错
//设置请求头，请求头的设置必须在xhr打开之后，并且在send之前
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};

// 给axios设置baseURL
axios.defaults.baseURL = ' https:、api';

let url = /film/getList';
axios.get(url).then(res => {
    console.log(res);
})

// 设置请求头
axios.defaults.headers['sessionToken'] = 'asd234';

  跨域的产生来源于现代浏览器所通用的‘同源策略’，所谓同源策略，是指只有在地址的： 

header('Access-Control-Allow-Origin:*');
//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');
//允许访问的方式 

// 创建axios对象

let $axios = axios.create({
    baseURL: 'http://。。。'
})

// 发送前拦截 request-请求
$axios.interceptors.request.use(res=> {
    // 添加请求头
    res.headers.sessionToken = 'as423424..';
    return res;
})

// 数据返回后的拦截 response-响应
$axios.interceptors.response.use(function (res) {
    if (res.data.code === '200') {
        return res.data;
    } else {
        alert(res.data.msg);
    }
}, function (error) {
    alert('网络异常');
})