axios网络交互应用-Vue

约定不等于承诺〃 2021-08-19 11:53 393阅读 0赞

![file][]

作者 | 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、从浏览器中创建XMLHttpRequests2、从node.js创建http请求3、支持PromiseAPI4、拦截请求和响应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全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

###  ###

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

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

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

![前端技术栈][format_png]

[file]: /images/20210724/aa7dbcd27ec5437c8a003dd7b705d3dd.png
[Link 1]: https://blog.csdn.net/qq_36232611
[format_png]: /images/20210724/0133bf79c3424e53a5ac26802cec2f87.png