axios网络交互应用-Vue

做者 | Jeskson

来源 | 达达前端小酒馆

<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>

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

能够提供如下服务:

一、从浏览器中建立XMLHttpRequests
二、从node.js建立http请求
三、支持PromiseAPI
四、拦截请求和响应
五、转换请求数据和响应数据
六、取消请求
七、自动转换JSON数据
八、客户端支持防护XSRF

Vue安装axios插件的命令是？

axios的安装:

安装命令; npm install axios

get: 通常多用于获取数据　

post: 主要提交表单数据和上传文件

put对数据所有进行更新

该请求和post相似，只是请求方法不一样

patch只对更改过的数据进行更新

该请求和post相似，只是请求方法不一样

delete删除请求

参数能够放在url上，也能够和post同样放在请求体中

axios是对ajax请求的封装

原生ajax请求实现

//步骤一:建立异步对象
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';

同源策略：

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

1. 协议名
2. 域名
3. 端口名

均同样的状况下，才容许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不一样源的状况下访问，就称为跨域。

如何解决axios跨域问题？

解决办法：

服务器（后台）设置容许跨域

浏览器设置跨域

经过代理容许跨域

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

拦截器分为 :

请求（request）拦截器和 响应（response）拦截器

经过axios.create建立一个axios实例

// 建立axios对象

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

请求（request）拦截器

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

响应（response）拦截器

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

记得分享哦！

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

做者Info：

【做者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合做！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

---

若本号内容有作得不到位的地方（好比：涉及版权或其余问题），请及时联系咱们进行整改便可，会在第一时间进行处理。

---

请点赞！由于大家的赞同/鼓励是我写做的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客