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>