05Vue3-Vue中使用axios异步通信

Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [JS中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios
 中文文档：http://www.axios-js.com/

为什么使用Axios

1.axios：

• 从 node.js 创建 http 请求
• 支持 Promise API
• 客户端支持防止CSRF
• 提供了一些并发请求的接口（重要，方便了很多的操作）

2.jQuery ajax：

• 本身是针对MVC的编程,不符合现在前端MVVM
• 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
• JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

Axios API

• axios.request（config）

• axios.get（url [，config]）

• axios.delete（url [，config]）

• axios.head（url [，config]）

• axios.post（url [，data [，config]]）

• axios.put（url [，data [，config]]）

• axios.patch（url [，data [，config]]）

Vue使用axios向服务器请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    axios.get('http://api.eduwork.cn/admin/link')
      .then(res=>{
        this.links = res.data
      }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped>
.footer {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
}
</style>

Vue使用axios向服务器提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>

<script>
import axios from "axios";
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  methods: {
    doSubmit() {
      axios.post('http://api.eduwork.cn/admin/link/add',this.link,{
        //将数据转换成字符串拼接
        transformRequest: [
            function (data) {
              let str = ''
              for (let key in data) {
                str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
              }
              return str
            }
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res=>{
        console.log(res);
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>
<style scoped>
.myconn {
  width: 90%;
  height: 150px;
  background-color: brown;
  margin: 10px;
}
</style>

Vue封装网络请求

network/request.js

import axios from "axios";

//创建实例
const instance = axios.create({
    baseURL:'http://api.eduwork.cn/admin',
    timeout: 5000
})

export function get(url,params) {
    return instance.get(url,{
        params
    })
}

get().then().catch();


export function post(url, params) {
    return instance.post(url, params, {
        //将数据转换成字符串拼接
        transformRequest: [
            function (data) {
                let str = ''
                for (let key in data) {
                    str += encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) + '&'
                }
                return str
            }
        ],
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    })
}

export function del(url) {
    return instance.delete(url)
}

//请求拦截器
instance.interceptors.request.use(
    config=>{
        config.headers.token = '123243'
        return config
    },
    error => {
        return Promise.reject(error)
    },
)
//响应拦截器
instance.interceptors.response.use(
    response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    error => {
        if (error.response.status) {
            return Promise.reject(error.response);
        }
    }
);

应用axios封装

提交数据

<template>
  <from action="#">
    网站名称: <input type="text" v-model="link.name">{{link.name}}<br>
    网站位置: <input type="text" v-model="link.url">{{link.url}}<br>
    位置排序: <input type="text" v-model="link.ord">{{link.ord}}<br>
    <input type="hidden" v-model="link.do_submit">{{link.do_submit}}<br>

    <button @click.prevent="doSubmit">添加数据</button>
  </from>
</template>
<script>
import {post} from '../../network/request'
export default {
  name: "MyConn",
  data() {
    return {
      num: 0,
      link: {
        name:'',
        url:'',
        ord: 0,
        do_submit: true
      }
    }
  },
  props: {
    article: {
      type: Array
    }
  },
  methods: {
    doSubmit() {
      post('/link/add',this.link).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log(err);
        })
    }
  }
}
</script>

<style scoped>
.myconn {
  width: 90%;
  height: 150px;
  background-color: brown;
  margin: 10px;
}
</style>

请求数据

<template>
  <div class="footer">
    <ul>
      <li v-for="(item,index) in links" :key="index">
        <a href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import {get} from '.../network/request'
export default {
  name: "MyFooter",
  data() {
    return {
      links: []
    }
  },
  mounted() {
    get('/link',{id:1}).then(res=>{
        this.links = res.data
      }).catch(err=>{
       console.log(err);
    })
  }
}
</script>

<style scoped>
.footer {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
}
</style>