专栏首页达达前端axios网络交互应用-Vue

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 中

可以提供以下服务:

1、从浏览器中创建XMLHttpRequests 2、从node.js创建http请求 3、支持PromiseAPI 4、拦截请求和响应 5、转换请求数据和响应数据 6、取消请求 7、自动转换JSON数据 8、客户端支持防御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全栈技术领域,数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持,承蒙厚爱!!!

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • wepy小程序项目

    达达前端
  • 第十二节:类的定义

    新建Worker类 为Worker类添加四个属性 为Worker类添加带参的构造方法,不带参的构造方法不再自动创建 创建不带参数的构造方法

    达达前端
  • 小程序弹出框详解

    达达前端
  • Confluence 6 配置服务器基础地址 原

    服务器基础地址(Server Base URL)是用户访问 Confluence 的 URL 地址。这个基础的 URL 地址必须与你在浏览器中访问 Conflu...

    HoneyMoose
  • SpringMVC-处理静态资源

    若将DispatcherServlet 请求映射配置为/,则SpringMVC 将捕获WEB容器的所有请求,包括静态资源的请求,SpringMVC会将他们当成一...

    桑鱼
  • Python 基础 数据类型 变量常量

    整数:Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样,例如:1,100,-8080,0,等等。十六进制用0x前缀和...

    heasy3
  • HTTP Methods

    这样是不是很容易理解了,细心你会发现:PUT和PATCH都是可以用来修改的,它们没有其他不同的地方吗?接下来我们就去更深层的解读一下这些方法的用法:

    江米小枣
  • 数据可视化大屏使用什么技术开发的?

          还记得双十一某宝的数据大屏吗?还记得你剁手了多少吗?他每年都在突破,而企业这历史性的时刻用可视化数据大屏是否更有意义?答案是肯定的!那么数据可视化大...

    要不要吃火锅
  • 挖洞经验 | 一个价值$3133.7美金的Google漏洞

    在对Google的安全研究中,由于其云服务平台“cloud.google.com” 具备多种功能,感觉有点意思,所以某天我决定来深入测试一下它。

    FB客服
  • Serverless Python 开发实战(附源码)

    Python是一种热门的编程语言,Serverless 是近年来迅速兴起的一个技术概念,基于Serverless架构能构建出多种应用场景,适用于各行各业。 本...

    腾讯云serverless团队

扫码关注云+社区

领取腾讯云代金券