Axions异步通信
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 【读音：xo】
由于Vue.js是一个视图层框架且作者(尤雨溪) 严格准守SoC (关注度分离原则)，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了一个名为vue-resource的插件，不过在进入2.0 版本以后停止了对该插件的维护并推荐了Axios 框架。少用jQuery，因为它操作Dom太频繁!
代码 初探axios
先建立一个data.json
{
"name": "cqh",
"age": "18",
"sex": "男",
"url":"https://www.baidu.com",
"address": {
"street": "缇香郡",
"city": "宁波",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com"
},
{
"name": "baidu",
"url": "https://www.baidu.com"
},
{
"name": "cqh video",
"url": "https://www.4399.com"
}
]
}
demo07.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AXios异步通信title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js">script>
head>
<body>
<div id="app">
<div>{{ info.name }}div>
<a v-bind:href="info.url">点我到百度链接a>
<br>
<div>{{ info.title1 }}div>
<ul>
<li v-for="link in info.links"> 名称：{{ link.name }}
<a v-bind:href="link.url">跳转地址a>
li>
ul>
<p>输出json里面存的对象p>
<p>名字：{{ info.address.street }}p>
<p>城市：{{ info.address.city }}p>
<p>地点：{{ info.address.country }}p>
div>
<script>
let vm = new Vue({
el: "#app",
//和data: 不同 属性：vm 这是属性
// data: {},
//这是方法data()
// 2.第二步，把后台的数据放进中间件vm里面，然后再通过前端调用再传值
data() {
//返回值
return {
info: {
//下面的这些都可以不用进行配置
// name: null,
// url: null,
// title1: null,
// address: {
// street: null, city: null, country: null,
// },
// links: [
// {name: null, url: null,}
// ]
},
}
},
mounted() {
//钩子函数 链式编程 ES6新特性 已安装
// 1.第一步，获取后台数据，这里是使用json来存值
// 也就是获得json里面的数据,然后想办法渲染到前端就ok了
axios.get("data.json").then(response => (this.info = response.data));
}
});
script>
body>
html>
测试结果：
补充：
什么是axios?
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
Axios特性
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击
基本使用
npm install axios --save
常见的配置
请求地址： url: '/user'
请求类型： method: 'get'
根路径： baseUrl: 'http://localhost:8080'
请求前的数据处理： transformRequest: [function(data){}]
请求后的数据处理： transformResponse: [function(data){}]
自定义请求头： headers: {'x-Requested-With': 'XMLHttpRequest'}
URL查询对象： params: {id: 12}
查询对象序列化函数： paramsSerializer: fucntion(params){}
request body: data:{key: 'aa'}
超时设置： timeout: 10000
跨域是否带token: withCredentials: false
自定义请求处理： adapter: function(resolve, reject, config){}
身份验证信息：auth: {uname: '', pwd: '1243'}
响应的数据格式： responseType: 'json/blob/document/arraybuffer/text/stream'
封装 axios
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
// 发送真正的网络请求 axios本身返回Promise 因此可以在外部 .then .catch
return instance(config)
}
只要调用reques（config）然后传进来一个地址，就可以进行配置了
请求拦截
axios.interceptors //这样是拦截全局的
import axios from 'axios'
// 最终版本
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
// 2.axios的拦截器
// 2.1 请求拦截的作用
instance.interceptors.request.use(config => {
console.log(config);
// 1.比如config中的一些信息不符合服务器要求
// 2.比如发送网络请求时，都希望在界面中显示一个请求的图标
// 3.某些网络请求(登录(token)),必须携带一些特殊的信息
// 拦截下来了 记得给返回出去
return config
}, err => {
console.log(err);
});
// 3.发送真正的网络请求 axios本身返回Promise
return instance(config)
响应拦截
import axios from 'axios'
// 最终版本
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
// 2.2 响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data
}, err => {
console.log(err);
})
// 3.发送真正的网络请求 axios本身返回Promise
return instance(config)
}